Vuejs2 Vue组件列表2事件处理

从列表中呈现组件时，如何使用.sync是个难题。如何处理组件中发出的事件以更新父级

正在尝试更新输入中的

categorySet.gradeCategory.predictionWeight

Vue.component（'category-set'{
道具：['categorySet']，
模板：'\n'+
“{categorySet.gradeCategory.gradeCategoryName}}\n”+
“\n”+
“\n”+
“\n”+
'            '
});

---

Fiddle:

添加.sync修改器时，您可以省略

v-on:input

部分

：prop.sync=“binding”

将有效地扩展到：

：prop=“binding”@update:prop=“value=>binding=value”

---

（：只是v-bind:的缩写，@代表v-on:）

就我个人而言，我会这样做：

将数组索引和项（cat）传递给组件，使用该项在组件中定义该项，然后绑定输入事件，该事件随后将完整对象及其索引发送回父对象，然后父对象将该项设置回数据中

由于

期末考试

项为空，

成绩类别

属性在视图中使用时需要处理/恢复该属性。此外，该标签在父级中是相同的，因此最好使用该标签，否则如果使用

gradeCategory

one，则该标签将为空

Vue.component（'categorySet'{
模板：“#类别集”，
道具：[“数据”，“索引”]，
数据（）{
返回{
项目：{
标签：this.data.label，
showInSummary:this.data.showInSummary，
等级类别：Object.assign({
“gradeCategoryName”：空，
“groupGradeWeight”：0.0，
“predictionWeight”：空，
“id”：this.data.id
}，此.data.gradeCategory），
id:this.data.id
}
}
},
方法：{
输入发生（e）{
this.$emit（'on-change'，this.item，this.index）
}
}
});
//
var vm=新的Vue({
el:“#应用程序”，
数据（）{
返回{
类别：[
{
“标签”：“分配”，
“showInSummary”：正确，
“等级类别”：{
“gradeCategoryName”：“作业”，
“groupGradeWeight”：0.0，
“predictionWeight”：空，
“身份证”：81
},
“身份证”：81
}, {
“标签”：“反射”，
“showInSummary”：正确，
“等级类别”：{
“gradeCategoryName”：“Reflections”，
“groupGradeWeight”：10.0，
“predictionWeight”：空，
“身份证”：82
},
“身份证”：82
}, {
“标签”：“测验”，
“showInSummary”：正确，
“等级类别”：{
“等级分类名称”：“测验”，
“groupGradeWeight”：10.0，
“预测权重”：10.0，
“身份证”：83
},
“身份证”：83
}, {
“标签”：“出席\u0026参与”，
“showInSummary”：正确，
“等级类别”：{
“等级分类名称”：“出席人数\u0026参与人数”，
“groupGradeWeight”：0.0，
“predictionWeight”：空，
“id”：84
},
“id”：84
}, {
“标签”：“期末考试”，
“showInSummary”：正确，
“等级类别”：空，
“身份证”：92
}
]
}
},
方法：{
syncCategorie（值、索引）{
this.categories[index]=Object.assign（this.categories[index]，value）；
}
}
});

{{categories}}
{{item.label}
@lawrencerone编辑，谢谢。我认为这不管用。如果查看小提琴，它不会更新父对象。
    Vue.component('category-set', {

  props: ['categorySet'],
  template: '            <div class="form-group">\n' +
    '                <label for="gradeRange" class="col-sm-2 control-label">{{ categorySet.gradeCategory.gradeCategoryName }}</label>\n' +
    '                <div class="col-sm-1">\n' +
    '                    <input id="gradeRange" class="form-control" type="number" v-bind:value.number="categorySet.gradeCategory.predictionWeight" \n' +
    '                           step="0.5" v-on:input="$emit(\'input\', $event.target.value)" > \n' +
    '                </div>\n' +
    '            </div>'
});