Vue.js プロパティの変更をデータに反映する

課題

Vuexでstateを管理していて、stateの変更によって 親コンポーネントで変更した内容を子コンポーネント（state未使用）に 反映したいが変更されたプロパティがデータに反映されなかった。どうすればよいか。 ちなみに親から渡されるプロパティはオブジェクトである。

対応

汎用の子コンポーネントを使いたい場合、stateの値を使うのではなく親からプロパティ渡しで 値をもらいたい事もあるだろう。プロパティをコンポーネントで使う際にデータにセットすることができるが、 初期値として使われるだけである。

props: {
    value: {
      type: Object,
      required: false,
      default: () => ( { code: '', name: '' } )
    },
},
data() {
    return {
        searchText: value.name
    }
}

ここでvalue内のcodeやnameを更新してもstateの内容は変わるが dataは更新されず、表示が切り替わらなかった。 そこで、プロパティの値をwatchで監視してあげることにする。

props: {
    value: {
      type: Object,
      required: false,
      default: () => ( { code: '', name: '' } )
    },
},
data() {
    return {
        searchText: value.name
    }
}
watch: {
    value(v) {
        this.searchText = v.name
    }
}

こうすることでプロパティの変更をデータに伝えることができ、 データの変更を検知してビューが変更される。