Question

我正在开发一款可让您捕捉和编辑足球比赛结果的应用。

有一个Matches组件进行AP调用以从服务器（match_list）获取多个匹配的数据，然后呈现一堆Match组件，将数据作为道具传递给这些组件用于填充其初始值的子组件。

<component :is="Match" v-for="match in match_list"
                     v-bind:key="match.id"
            v-bind="match"></component>

在Match组件上，我接受所有值作为props。但我得到一个警告，道具不应该被编辑，而这些应该是数据元素。所以我尝试将它们传递给组件数据。

export default {
        name: "Match",
        props: ['local_team', 'visitor_team', 'localScore', 'visitorScore', 'date', 'time', 'location', 'matchId'],
      data(){
          return{
            id: this.id,
            local_team: this.local_team,
            visitor_team: this.visitor_team,
            location: this.location,
            date: this.date,
            time: this.time,
            localScore: this.localScore,
            visitorScore: this.visitorScore
          }
      },

现在我收到警告，可编辑的数据不应该基于道具。

如何使Match组件中的数据可编辑，以便安全地传播到父组件？

Answer 1

您需要在组件的道具上接受匹配对象，并在数据上复制它（用作输入的模型）。当您的模型发生变化时，您应该将更改发送到父级，以便它可以适当地更改自己的数据（然后通过子项的道具正确传递和反映）：

在此示例中，我会监视模型的任何更改，然后直接发出事件，您当然可以通过使用提交按钮替换该行为，该按钮可在单击时触发事件。

＆＃13;

Vue.component('match', {
  template: `
    <div>
      <p>{{match.name}}</p>
      <input v-model="matchModel.name" />
    </div>
  `,
  props: ['match'],
  data() {
    return {
      matchModel: Object.assign({}, this.match)
    }
  },
  watch: {
    matchModel: {
      handler(val) {
        this.$emit('match-change', val)
      },
      deep: true,
    }
  }
});


new Vue({
  el: "#app",
  data: {
    matches: [{
        id: 1,
        name: 'first match'
      },
      {
        id: 2,
        name: 'second match'
      }
    ]
  },
  methods: {
    onMatchChange(id, newMatch) {
      const match = this.matches.find((m) => m.id == id);
      Object.assign(match, newMatch);
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <match v-for="match in matches" :match="match" :key="match.id" @match-change="onMatchChange(match.id, $event)"></match>
</div>

＆＃13;

如何将可编辑数据传递给组件？

1 个答案: