过滤/搜索问题后更改输入 - VueJS

Question

我是 VueJS 的新手，没有足够的经验来处理这个功能。
所以我创建了一个问题来提问（问题可能重复）。

例如我使用computed 来处理主要的过滤/搜索功能

computed: {
  filteredProducts: function () {
    return this.products.filter(product => product.name.includes(this.filter.name));
  }
}

下一步，我使用v-for 指令渲染产品列表，使用filteredProducts

<div v-for="product in filteredProducts" :key="product.id">
  <input type="text" v-model="product.name" />
</div>

我还有一个文本框，用户可以输入产品名称进行搜索

<input type="text" v-model="filter.name" />

通过在搜索输入中输入，产品列表会正确重新呈现。
当我尝试从产品名称输入中删除某些字符时出现问题，然后输入从列表中消失。
保持输入在编辑时显示的最佳方法是什么？

Answer 1

如果您想在尝试编辑产品名称时保留它们，请使用:value 而不是v-model，这样您在编辑产品输入字段时就不会更改产品名称。 v-model 是一种双向数据绑定，而:value 是一种单向数据绑定。更多关于他们区别的信息here。

<div v-for="product in filteredProducts" :key="product.id">
  <input type="text" :value="product.name" />
</div>

<input type="text" v-model="filter.name" />