VueJS 2.0 циклические компоненты и изменение реквизита

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

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

<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 я бы просто изменил его на дочернем компоненте IT self. Я знаю, что это хмуро и просто невозможно в vue2.0. Какая здесь лучшая практика?

1 ответ

  1. Вы должны передать текущий платеж вашему 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>