Vue chips いろいろ

  • htmlタグ内では{{ }}は使わないで v-bindまたはコロンで下記のように記述

data() {

    return {

        img: "http://~~~~"

    }

}

<img :src='img'>

 

  • セミコロンの取り扱い

セミコロンなし → static 

<router-link to="hoge">

セミコロンあり → dynamic

<router-link :to="foo">

computed: {
  foo() {
    regrgergs

  }

 

 

  • vuexでstateを設定した後、各componentでstateを呼び出したいとき

ページがレンダリングした時に同時に取得したいならcomputed

created()でstateの値を入れた場合、

data() {
    hoge : this.$store.state.~~~~

}

では値が取得できない。タイミングの問題???

computed: {

    hoge() {

        this.$store.state.~~~~

    }

}

* ここで 無駄にdataにhogeを作っておくとcomputedが反映されないので注意

イベント発動時にstateを取得したい場合、

sendMessage() {
  const message = {
    messageText: this.messageText,
    user: this.$store.state.user.user.name
  };

}

直接値をthis.$store.state.user.user.nameから参照できる