Question

我有这个小提琴，如果你使用inputSpinner然后在顶部使用过滤器输入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> ....

Answer 1

当您过滤数据时，Vue会破坏/重新创建未使用的组件（例如，如果查找Bruce Lee，会破坏Chuck Norris），随着组件被破坏，您将丢失数据，因为这不会持久。

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

这里有更新的jsFiddle：https://jsfiddle.net/myeu0sL3/9/

我刚刚做的是将数据传递给newNumber事件中的父级，并将其分配给集合，如下所示：

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

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

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

并在card事件中发出newNumber：

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

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

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

那就是：）

如何在Vue2中使用过滤器时重置子组件的值

1 个答案: