VueJs 2.0ループコンポーネントと変化する小道

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メソッドに渡して、それを引数として受け取る必要があります。

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>