Блог

Я пытаюсь выяснить, каков наилучший способ обработки компонентов цикла. Вот несколько примеров кода.

Это своего рода то, что я пытаюсь сделать. Мой основной компонент содержит данные о платежах, которые зацикливаются на дочерних компонентах.

 <tr v-for="payment in payments"
is="component-payment-item"
:payment="payment
v-on:toggleReported="togglePaymentReported"">
 </tr>
  

Мой дочерний компонент, когда он хочет пометить платеж как сообщенный, просто отправляет событие. Который фиксирует родительский компонент. Итак, в родительском компоненте я пробую это.

 togglePaymentReported(payment) {
    payment.reported = ! payment.reported;
}
  

Я точно знаю, что это срабатывает, однако это изменение никогда не возвращается к дочернему компоненту. Я не знаю, лучший ли это способ справиться с этим. Другой способ, которым я думал, — это действительно найти этот платеж в массиве и изменить его таким образом, но я полагал, что он будет передан по ссылке и распространится на дочерний компонент.

В vue 1.0 я бы просто изменил его на дочернем компоненте самостоятельно. Я знаю, что это не одобряется и просто невозможно в vue2.0. Какова наилучшая практика здесь?

Вам необходимо передать текущий платеж вашему togglePaymentReported методу, чтобы он получил его в качестве аргумента.

 pb = Vue.extend({
  template: '#paybutton-template',
  props: ['payment'],
  methods: {
    toggle: function() {
      this.$emit('toggle');
    }
  }
});

vm = new Vue({
  el: '#app',
  components: {
    'payment-button': pb
  },
  data: {
    payments: []
  },
  methods: {
    handleToggle: function(payment) {
      payment.paid = !payment.paid;
    }
  },
  mounted: function() {
    // Simulating setting from ajax
    setTimeout(() => {
      this.payments = [{
        id: 1,
        paid: false
      }, {
        id: 2,
        paid: false
      }];
    }, 800);
  }
});  

 <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
  <payment-button v-for="payment in payments" :payment="payment" v-on:toggle="handleToggle(payment)"></payment-button>
</div>

<template id="paybutton-template">
  <div>
    {{payment.id}}: {{payment.paid}}
    <button @click="toggle">Pay</button>
  </div>
</template>