将多个v模型附加到vuejs 2中动态子组件的循环

解决方案碰巧是 .sync 方法和事件的正确命名。虽然sync在vue.js 2中已被弃用和删除,但2.3版本已被重写并以类似的形式再次添加。事实上,它只是一种合成糖,我相信我的成分现在看起来更像样了。

<ol>
    <li :is="field.type" 
        v-for="(field, i) in fields"
        :key="field.id"
        v-bind.sync="field"
        v-on:remove="fields.splice(i, 1)"></li>
</ol>



Vue.component('bool', {
  template: '\
    <li>\
      <input type="text" v-bind:value="title" @input="$emit(\'update:title\', $event.target.value)">\
      <button v-bind:value="value" @click="$emit(\'update:value\', !$event.target.value)" :class="{active: value}">{{value}}</button>\
      <input type="checkbox" value="1" v-bind:checked="istrue" @change="$emit(\'update:istrue\', $event.target.checked)">\
      <button @click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  data () {
    return {}
  },
  props: ['title', 'value', 'availablevalues']
})