Wie behalte ich die Referenz eines Artikels in der gefilterten Liste in vue2

Question

Also habe ich eine Liste und ich erstelle Karten auf das, es sieht so aus.

JSFIDDLE

var vm = new Vue({ 
    components: { 
    'card': card 
    }, 
    el: '#demo', 
    data: { 
    customers: [{ 
     id: '1', 
     name: 'user 1', 
     amount: '123.24', 
     profile_pic: 'https://i.stack.imgur.com/CE5lz.png', 
     email: 'ab@gmail.com', 
     phone: '+91959657248', 
     unread: '0' 
    }, { 
     id: '2', 
     name: 'user 2', 
     amount: '34.44', 
     profile_pic: 'https://i.stack.imgur.com/CE5lz.png', 
     email: 'abcd@gmail.com', 
     phone: '+919456664023', 
     unread: '0' 
    }, { 
     id: '3', 
     name: 'user 3', 
     amount: '1.24', 
     profile_pic: 'https://i.stack.imgur.com/CE5lz.png', 
     email: 'test@gmail.com', 
     phone: '+919566565065', 
     unread: '0' 
    }, { 
     id: '4', 
     name: 'user 4', 
     amount: '123.24', 
     profile_pic: 'https://i.stack.imgur.com/CE5lz.png', 
     email: 'sample@gmail.com', 
     phone: '+916466004566', 
     unread: '0' 
    }], 
    query: '', 
    }, 
    computed: { 
    tableFilter: function() { 
     return this.findBy(this.customers, this.query, 'name') 
    } 
    }, 
    methods: { 
    findBy: function(list, value, column) { 
     return list.filter(function(item) { 
     return item[column].includes(value) 
     }) 
    }, 
    updateComission(commission, id) { 
     console.log(id); 
     alert('I am parent need to update data'); 
    } 
    } 
}) 

ich den Betrag in der Karte aktualisiert werden soll, wenn die Schaltfläche ‚+‘ angeklickt wird, ich tat vorher den Index der Liste, aber jedes Mal Liste gefiltert wird der Index geändert wird und es war die Aktualisierung der falschen Daten.

Jede Idee, wie kann ich dieses Problem beheben

Answer 1

gerade das Einzelteil als Stütze für die Card Komponente zu übergeben und dann an die NumberInputSpinner Komponente.

<card v-for="item in tableFilter" :name="item.name" @commission_change="updateComission" :amount="item.amount" :item="item"></card> 

<numberinputspinner :min="0" :max="2" :step="0.0001" @newNumber="updateTable" :item="item" /> 

dann nur die Stütze verwenden, um die Liste Referenz

increaseNumber() { 
    this.numericValue += this.step; 
    this.item.amount += this.step; 
}, 

https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props

zu aktualisieren, wenn Sie das Produkt ref in der Kartenkomponente aktualisieren möchten emittieren nur update_event die numberInputSpinner bilden, dann Aktualisieren Sie die Artikelreferenz in der cardComponent

aktualisiert fiddle: https://jsfiddle.net/gewsu3yd/19/