3

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?

Thanh Dao
  • 1,218
  • 2
  • 16
  • 43

1 Answers1

1

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" />
Blackraspberryyy
  • 2,016
  • 2
  • 11
  • 22
  • Thank for your reply. By this way, how can I retrieve changed values for sending update request? – Thanh Dao Sep 18 '20 at 10:55
  • Oh, I might've misunderstood what you were trying to do. Do you want the product names to still be searchable when you edit one product name even if it changed its name? Then the changes must be saved somewhere so you can send an update request? Is that what you're trying to do? – Blackraspberryyy Sep 19 '20 at 08:43