web-dev-qa-db-fra.com

Vue changer d'objet dans le tableau et déclencher la réactivité

Comment puis-je déclencher une mise à jour lors de la modification d'une partie d'un objet trouvé par index dans un tableau?

La documentation montre comment modifier la valeur d'un tableau:

Vue.set(example1.items, indexOfItem, newValue) Ou example1.items.splice(indexOfItem, 1, newValue)

Mais comment modifier la valeur d'une propriété sur un objet dans un tableau sans changer le reste de l'objet?

Ce qui suit fonctionne pour mettre à jour la propriété, mais Vue ne réagit pas à la modification tant que quelque chose d'autre ne déclenche pas une mise à jour.

example1.items[indexOfItem].some_object_property = false

vue.jsvuejs2reactive
7
shanemgrey

Tant que vous appelez set () une fois pour définir l'objet (avec la propriété que vous allez mettre à jour) dans le tableau, Vue réagira aux modifications des propriétés de l'objet. Voici un exemple dans lequel un tableau d'objets est initialisé dans les données de notre application et un autre tableau d'objets défini manuellement (avec Vue.set ()) lors du montage. Un clic sur le bouton met à jour une propriété sur un objet de chacune de ces matrices et Vue réagit. Notez que l'appel set () qui se passe dans mount () peut réellement se produire à tout moment.

https://codepen.io/jordan-kalosal/pen/VrwjoR

new Vue({
  el: "#app",
  data: {
    arr: [
      {
        property: 'OBJ1 Prop'
      },
      {
        property: 'OBJ2 Prop'
      }
    ],
    setLater: false
  },
  mounted() {
    this.$set(this, 'setLater', [
      {
        property: 'setLater OBJ1 Prop'
      },
      {
        property: 'setLater OBJ2 Prop'
      }
    ])
  },
  methods: {
    _updateObjProps() {
      this.arr[0].property = (new Date()).toString();
      this.setLater[0].property = (new Date()).toString();
    }
  }
})
2
Jordan Haines

Vous pouvez éditer directement la sous-propriété, puis utiliser Vue.set() pour déclencher la mise à jour:

methods: {
  update() {
    this.items[1].foo.x++;
    Vue.set(this.items, 1, this.items[1]);
  }
}


new Vue({
  el: '#app',
  data() {
    return {
      arr: [
        {
          foo: {
            x: 100,
            y: 200
          }
        },
        {
          foo: {
            x: 300,
            y: 400
          }
        }
      ]
    };
  },
  
  methods: {
    update() {
      this.arr[1].foo.x += 100;
      Vue.set(this.arr, 1, this.arr[1]);
      console.log('arr[1].foo.x', this.arr[1].foo.x)
    }
  }
})
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <button @click="update">Update</button>
  <p>arr[0]: {{ arr[0] }}</p>
  <p>arr[1]: {{ arr[1] }}</p>
</div>

démo

6
tony19