Change inputs after filtered/searched problems - VueJS

user_4906552 0
Viewed 57

I'm a newbie in VueJS and do not have experience enough to handle this function.
So I create a question for asking (The question may be duplicated).

For example I used computed to handle main filter/search function

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

Next step, I render list of products with v-for directive, using filteredProducts

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

I have also an other text box, user can typing for searching by name of products

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

By typing into search input, list of products is re-rendering properly.
The problem occurs when I try to remove some characters from Product name input, then the input was disappeared from the list.
What is the best way to keep the input appear on editing?

vuejs2 vue.js javascript
1 Answers

If you want to retain the product names when you try to edit them, use :value instead of v-model so you don't end up changing the product names when you edit their input field. v-model is a two-way data binding while the :value is a one-way data binding. More info on their difference here.

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

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