解决方案碰巧是
.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']
})