VueJs Смотреть за ключ модели

Question

У меня есть объект (модель) в качестве поля ввода для метода поиска, и я хочу, чтобы наблюдатель обнаруживал изменения по ключу, а не по всем.

Прямо сейчас, если ввод изменено, наблюдатель вызывается 10 раз (количество входов, которые у меня есть).

<b-form-input
        v-model="search[field.column]"
        type="search"
        id="filterInput"
        placeholder="search.."
></b-form-input>

watch:{
search: {
    handler(){
        // do somenthing
    },
    deep: true
}
}

Answer 1

Вы можете явно просматривать только необходимый ключ.

new Vue({
  el: '#app',

  data: {
    search: {
      name: { placeholder: 'search name', value: '' },
      age: { placeholder: 'search age', value: '' },
      country: { placeholder: 'search country', value: '' }
    }
  },

  watch:{
    'search.name.value': { // Explicitly watch the required key.
        handler(){
            console.log('name changed...')
        }
    }
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

   <form>
    <input
      v-for="(value, key, i) in search"
      :key="i"
      v-model="search[key].value"
      type="search"
      id="filterInput"
      :placeholder="value.placeholder"
    /> 
   </form>
 
 </div>

Итак, здесь обработчик часов вызывается только при поиске по имени и не вызывается при поиске по возрасту или стране.

Answer 2

Вы можете посмотреть вычисленное значение, которое возвращает указанное поле c, которое вы хотите просмотреть.

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    form: {
      name : '',
      lastname: ''
    }
  },
  computed: {
    formName() {
      return this.form.name;
    }
  },
  watch: {
    formName() {
      console.log("Name has changed")
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Name : 
  <input v-model="form.name" />
  Lastname : 
  <input v-model="form.lastname" />
</div>