VueJs 2.0循环组件和改变道具

VueJs 2.0 Looping components and changing props

本文关键字：改变 变道 组件 循环 VueJs      更新时间：2023-09-26

我正试图找出处理循环组件的最佳方法。下面是一些示例代码:

这就是我想做的。我的主组件有支付数据，它循环到子组件。

<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中，我只会在子组件上更改它。我知道这在ve2.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>

相关文章：