web-dev-qa-db-fra.com

Comment vue regarder une propriété spécifique dans un tableau d'objets

J'utilise vue.js 2.5.2

J'ai un tableau d'objets et je voudrais regarder les formulaires [*]. Sélectionnés et si cela change appeler une fonction.

C'est ma tentative, mais évidemment ce n'est pas correct. J'ai essayé de mettre le tableau dans une boucle for pour regarder la propriété de chaque objet sélectionnée.

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

Ceci est le tableau d'objets appelés formulaires []

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
        }
      ],

Toute aide serait grandement appréciée,

Merci

objectvue.jswatch
8
Shane G

Vous pouvez utiliser un observateur profond , mais une solution plus élégante serait de créer une propriété calculée des données que vous souhaitez regarder, et regardez plutôt:

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>
7
Andrei Savin