Как передать редактируемые данные в компонент? - PullRequest
Новая
       7

Как передать редактируемые данные в компонент?

0 голосов
/ 16 мая 2018

Я работаю над приложением, которое позволяет вам захватывать и редактировать результаты футбольных матчей.

есть компонент Matches, который выполняет вызов AP для получения данных нескольких матчей с сервера (match_list), а затем визуализирует группу Match компонентов, передавая данные в качестве реквизитов этим подкомпонентам для заполнения их начальных значений. 

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

В компоненте Match я принимаю все значения в качестве реквизитов,Но я получаю предупреждение, что реквизиты не должны редактироваться, и это должны быть элементы данных.Поэтому я попытался передать их в данные компонента. 

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компонент редактируемый, поэтому он безопасно распространяется на родительский компонент?

1 Ответ

0 голосов
/ 16 мая 2018

Вам необходимо принять свой соответствующий объект на подпорках компонента и скопировать его на данные (для использования в качестве модели для ваших входных данных). Когда ваша модель изменится, вы должны передать это изменение родителю, чтобы он мог соответствующим образом изменить свои собственные данные (которые затем передаются и корректно отражаются через подпорки ребенка):

В этом примере я наблюдаю за любыми изменениями в модели, а затем генерирую событие напрямую. Конечно, вы можете заменить это поведение, имея кнопку отправки, которая запускает событие при нажатии или что-то в этом роде. 

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