[Vuejs]-How to reset value of Child componenet when filter is used in Vue2

by

0👍

✅

When you filter the data, Vue destroys/recreate the unused components (for example if looking for Bruce Lee, would destroy Chuck Norris), as components get destroyed you will lose the data, as is not persistent.

You need to keep that data sync with the parent so when recreated again it would reassign its previous value.

Here’s the updated jsFiddle: https://jsfiddle.net/myeu0sL3/9/

What I just did was pass the data to the parent in the newNumber event, and assign it to the collection, like this:

updateTable:function(card, data){
    card.value = data;
}

and then in the component just assign it whenever is passed:

data: function () {
    const vm = this;
    return {
        numericValue: vm.card.value,
    };
},

and emit the card in the newNumber event:

this.$emit('newNumber', this.card, parseFloat(val).toFixed(4), parseFloat(oldVal).toFixed(4) );

Oh and finally there was a mistake in your props declaration, you had it twice, so I merged to include the cards:

    card: {
        type: Object,
      required: true
    },

That’s it 🙂

Leave a comment