How to vue watch a specific property in an array of objects

Question

I'm using vue.js 2.5.2

I have an array of objects and I'd like to watch forms[*].selected and if it changes call a function.

This is my attempt, but obviously, it is not correct. I tried putting the array into a for loop to watch each object's property selected.

watch: {
  for (var i = 0; i < forms.length; i++) 
  {
      forms[i].selected: function(){
      console.log("change made to selection");
    }
  }
},

This is the array of objects called forms[]

forms: [
  {
    day: '12',
    month: '9',
    year: '2035',
    colors: 'lightblue',//default colour in case none is chosen
    selected: true
  },
  {
    day: '28',
    month: '01',
    year: '2017',
    colors: 'lightgreen',//default colour in case none is chosen
    selected: true
  }
],

Any help would be greatly appreciated,

Thanks

Possible duplicate of Vue.js - How to properly watch for nested data — str
– str, Commented Sep 11, 2018 at 19:04

tony19 · Accepted Answer · 2022-07-15 19:48:37Z

45

You could use a deep watcher, but a more elegant solution would be to create computed property of the data you want to watch, and watch that instead:

new Vue({
  el: '#app',
  data: () => ({
    forms: [{
        day: '12',
        month: '9',
        year: '2035',
        colors: 'lightblue',
        selected: true
      },
      {
        day: '28',
        month: '01',
        year: '2017',
        colors: 'lightgreen',
        selected: true
      }
    ],
  }),
  computed: {
    selected() {
      return this.forms.map(form => form.selected)
    }
  },
  watch: {
    selected(newValue) {
      console.log("change made to selection")
    }
  }
})

<html>

<head>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>

  <div id="app">
    <ul>
      <li v-for="(form, i) in forms" :key="i">
        <input type="checkbox" v-model="form.selected"> {{form.colors}}
      </li>
    </ul>
  </div>

</body>

</html>

edited Jul 15, 2022 at 19:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 18, 2019 at 16:05

Andrei Savin

2,5044 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Umar Nazir Over a year ago

What if we want to watch multiple properties like color and year as well? Need to define a computed property for each color and year as well?

pxeba · Accepted Answer · 2022-12-26 18:01:21Z

1

Vue Watchers

Using deep tag is a simpler option but be careful with lists with many objects. It is not very optimized

watch: {
    colours: {
      // This will let Vue know to look inside the array
      deep: true,

      // We have to move our method to a handler field
      handler()
        console.log('The list of colours has changed!');
      }
    }
  }

answered Dec 26, 2022 at 18:01

pxeba

1,91617 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to vue watch a specific property in an array of objects

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related