Vue.js .sync修飾子

<my-shop :name.sync="name" :price.sync="price"></my-shop>

Vue.component('my-shop', {
  template: `
<div class="my-shop">
  <p>商品名: {{ name }}　価格: {{ price }}</p>
  <p>
    商品名: <input v-model="localName">
    価格: <input type="number" v-model="localPrice">
  </p>
</div>`,
  props: {
    name: String,
    price: Number
  },
  computed: {
    localName: {
      get() {
        return this.name
      },
      set(val) {
        this.$emit('update:name', val)
      }
    },
    localPrice: {
      get() {
        return this.price
      },
      set(val) {
        this.$emit('update:price', val)
      }
    }
  }
})

new Vue({
  el: '#app',
  data: {
    name: 'HDD',
    price: 5000
  }
})

元記事に戻る