vue组件列表2事件处理

Question

在渲染列表中的组件时如何使用 .sync。如何处理组件中发出的事件以更新父级？

尝试更新输入中的categorySet.gradeCategory.predictionWeight。

<category-set v-for="cat in categories" v-bind:key="cat.id" v-bind:category-set="cat"></category-set>

    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>'
});

小提琴：https://jsfiddle.net/rhmiller/aq9Laaew/10971/

Answer 1

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

组件被传递数组索引和项目（cat），其中项目是您在组件中定义的项目，然后绑定输入事件，然后将完整的对象及其索引发送回父级，然后是父级将项目设置回数据中。

由于Final Exam 项目被取消，gradeCategory 属性您需要在视图中使用它时对其进行处理/恢复。此外，父标签中的标签也是相同的，因此更喜欢使用它，否则如果您使用 gradeCategory 一个，它将为空。

Vue.component('categorySet', {
  template: '#category-set',
  props: ['data', 'index'],
  data() {
    return {
      item: {
         label: this.data.label,
         showInSummary: this.data.showInSummary,
         gradeCategory: Object.assign({
            "gradeCategoryName": null,
            "groupGradeWeight": 0.0,
            "predictionWeight": null,
            "id": this.data.id
         }, this.data.gradeCategory),
         id: this.data.id
       }
    }
  },
  methods: {
    inputOccurred(e) {
      this.$emit('on-change', this.item, this.index)
    }
  }
});

//
var vm = new Vue({
  el: '#app',
  data() {
    return {
      categories: [
        {
          "label": "Assignments",
          "showInSummary": true,
          "gradeCategory": {
            "gradeCategoryName": "Assignments",
            "groupGradeWeight": 0.0,
            "predictionWeight": null,
            "id": 81
          },
          "id": 81
        }, {
          "label": "Reflections",
          "showInSummary": true,
          "gradeCategory": {
            "gradeCategoryName": "Reflections",
            "groupGradeWeight": 10.0,
            "predictionWeight": null,
            "id": 82
          },
          "id": 82
        }, {
          "label": "Quizzes",
          "showInSummary": true,
          "gradeCategory": {
            "gradeCategoryName": "Quizzes",
            "groupGradeWeight": 10.0,
            "predictionWeight": 10.0,
            "id": 83
          },
          "id": 83
        }, {
          "label": "Attendance \u0026 Participation",
          "showInSummary": true,
          "gradeCategory": {
            "gradeCategoryName": "Attendance \u0026 Participation",
            "groupGradeWeight": 0.0,
            "predictionWeight": null,
            "id": 84
          },
          "id": 84
        }, {
          "label": "Final Exam",
          "showInSummary": true,
          "gradeCategory": null,
          "id": 92
        }
      ]
    }
  },
  methods: {
    syncCategorie(value, index) {
      this.categories[index] = Object.assign(this.categories[index], value);
    }
  }
});

<div id="app">
  <category-set v-for="(cat, index) in categories" :key="cat.id" :data="cat" :index="index" @on-change="syncCategorie"></category-set>
  <pre>{{ categories }}</pre>
</div>

<template id="category-set">
  <div class="form-group">
    <label for="gradeRange" class="col-sm-3 control-label">{{ item.label }}</label>
      <div class="col-sm-1">
        <input id="gradeRange" class="form-control" type="number" v-model="item.gradeCategory.predictionWeight" step="0.5" @input="inputOccurred">
      </div>
  </div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

运行 sn -p 你会看到它更新了父级。

Answer 2

您可以在添加 .sync 修饰符时省略 v-on:input 部分。

:prop.sync="binding"

will 有效地扩展为：

:prop="binding" @update:prop="value => binding = value"

( : 只是 v-bind: 的缩写，@ 是 v-on: 的缩写)