実は簡単なVueの双方向( two way )バインディング

1.子コンポーネントに value という名前の Props を作成する

必ず value という名前で作成しましょう

export default {
  props: {
    value: {
      type: String,
      required: true
    }
  }
}

2.子コンポーネントに computed を作成する

export default {
  computed: {
    inputValue: {
      get() {
        return this.value; 
      },
      set(value) {
        this.$emit('input', value); 
      }
    }
  } ,
}

3.子コンポーネントの input タグに v-modelを指定する

  <input type="text" v-model="inputValue" />

以上です。

4.呼び出し元の親コンポーネントの v-model を指定する

<my-component v-model="item.content.value"></my-component>

引用: https://b1tblog.com/2019/10/17/vue-vscode-addons/

No.1959
03/02 23:49

edit