web-dev-qa-db-fra.com

Vuejs et Vue.set (), tableau de mise à jour

Je suis nouveau à Vuejs. Fait quelque chose, mais je ne sais pas si c'est simple/correct.

ce que je veux

Je veux des dates dans un tableau et les mettre à jour sur un événement. J'ai d'abord essayé Vue.set, mais ça n'a pas marché. Maintenant, après avoir changé mon élément de tableau:

this.items[index] = val;
this.items.Push();

I Push () rien au tableau et il va mettre à jour .. Mais parfois, le dernier élément sera caché, en quelque sorte ... Je pense que cette solution est un peu hacky, comment puis-je le rendre stable?

Le code simple est ici:

new Vue({
  el: '#app',
  data: {
        f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {
    
    cha: function(index, item, what, count) {
        console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);
                this.items[index] = val;
      this.items.Push();
      console.log("arr length:  " + this.items.length);
    }
  }
})
ul {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
    <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button>
      {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
    <br><br>
    </li>
  </ul>
</div>
javascriptvue.jsmomentjsvuejs2
56
Johan Hoeksma

VueJS ne peut pas récupérer vos changements d'état si vous manipulez des tableaux comme celui-ci.

Comme expliqué dans Common Beginner Gotchas , vous devez utiliser des méthodes de type tableau, telles que Push, splice ou autre, et ne jamais modifier les index tels que a[2] = 2 ni la propriété .length d'un tableau.

new Vue({
  el: '#app',
  data: {
        f: 'DD-MM-YYYY',
    items: [
      "10-03-2017",
      "12-03-2017"
    ]
  },
  methods: {
    
    cha: function(index, item, what, count) {
        console.log(item + " index > " + index);
      val = moment(this.items[index], this.f).add(count, what).format(this.f);


          this.items.$set(index, val)
      console.log("arr length:  " + this.items.length);
    }
  }
})
ul {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
  <ul>
    <li v-for="(index, item) in items">
    <br><br>
      <button v-on:click="cha(index, item, 'day', -1)">
      - day</button>
      {{ item }}
      <button v-on:click="cha(index, item, 'day', 1)">
      + day</button>
    <br><br>
    </li>
  </ul>
</div>
31
Borjante

EDIT 2

  • Pour tous les changements d'objet nécessitant une réactivité, utilisez Vue.set(object, prop, value).
  • Pour les mutations du tableau, vous pouvez consulter la liste actuellement prise en charge here

EDIT 1

Pour la vuex, vous voudrez faire Vue.set(state.object, key, value)

Original

Donc, juste pour les autres qui viennent à cette question. Il apparaît à un moment donné dans Vue 2. * ils ont supprimé this.items.$set(index, val) au profit de this.$set(this.items, index, val).

L'épissure est toujours disponible et voici un lien vers les méthodes de mutation de tableau disponibles dans vue lien .

83
Martin Calvert