Vue.js 在Vue2中使用筛选器时如何重置子组件的值

我有一把小提琴，如果使用inputSpinner，然后在顶部使用filter，那么输入spiner的值保持不变

我的问题是这样的

代码

<script type="text/x-template" id="grid-template">
<div class="container" style="margin-top:10px;">
  <ul class="list-group">
    <li  v-for="entry in filteredData" class="list-group-item" >{{entry.name}} <div><numberinputspinner
                        :min="0"
                        :max="2"
                        :step="0.0001"
                        :card="entry"
                        @newNumber="updateTable"
                      /></div></li>
  </ul>
  </div>
</script> ....

{{entry.name}

....

过滤数据时，Vue会销毁/重新创建未使用的组件（例如，如果要查找Bruce Lee，则会销毁Chuck Norris），当组件被销毁时，您将丢失数据，因为这不是持久性的

您需要使该数据与父级保持同步，以便再次重新创建时，它将重新分配其以前的值

以下是更新的JSFIDLE：

我刚才做的是在

newNumber

事件中将数据传递给父级，并将其分配给集合，如下所示：

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

然后在组件中，只要在传递时分配它：

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

并在

newNumber

事件中发出

卡

：

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

哦，最后在你的道具声明中出现了一个错误，你有两次，所以我合并了卡片：

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

---

就是这样：）

为什么不更新组件以支持

v-model

？