Question

我试图弄清楚处理循环组件的最佳方法是什么。这是一些示例代码。

这是我想要做的事情。我的主要组件具有循环到子组件的付款数据。

<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中是不可能的。这里的最佳做法是什么？

Answer 1

您需要将当前付款传递给togglePaymentReported方法，才能将其作为参数接收。

＆＃13;

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

＆＃13;

<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>

＆＃13;

VueJs 2.0循环组件和改变道具

1 个答案: