[Vuejs]-Vue – Filter 2D Array but modify original unfiltered array v-models

0πŸ‘

In JavaScript, objects are a reference type so you can use its reference in a new array and then mutate it.

<div id='app'>
  <input v-model='search'>
  <div v-for='item in filteredItems'>
    <label>{{ item.name }}</label>
    <input v-model='item.input'>
  </div>
</div>
new Vue({
  data: {
    search: '',
    items: [
      {
        name: 'maculomancy',
        input: 'divination using spots'
      },
      {
        name: 'forficulate',
        input: 'like scissors'
      },
      {
        name: 'wainage',
        input: 'cultivation of land'
      }
    ]
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        new RegExp(this.search, 'i').test(item.name)
      )
    }
  }
}).$mount('#app')

Example

Leave a comment