[Vuejs]-How to vue watch a specific property in an array

by

0👍

✅

Here’s a working example of what Terry proposed in the comments, using a computed property and a watcher. This always reads and writes from/tro the first element in the TableProduit array – you might need to make use of Array.prototype.find() in order to get the correct object having a clientFilter property depending on your needs, but it’s not clear what you’re trying to achieve exactly from your question.

Type in the input field to change the clientFilter property and see the console message triggered by the watcher.

new Vue({
  el: '#app',
  template: `<input type="text" v-model:value="TableProduit[0].clientFilter" />`,
  data: {
    TableProduit: [{
      nr_commande: 0,
      date_creation: "",
      id_delegue: "1",
      clientFilter: ""
    }],
  },
  computed: {
    clientFilter: {
      get: function() {
        return this.TableProduit[0].clientFilter;
      },
      set: function(newValue) {
        this.TableProduit[0].clientFilter = newValue;
      }
    }
  },
  watch: {
    clientFilter: function(newValue) {
      console.log(`clientFilter changed to "${newValue}"`);
    }
  }
});
Vue.config.productionTip = false;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Leave a comment