web-dev-qa-db-fra.com

Vue.js - la valeur de l'élément de tableau mis à jour ne se met pas à jour dans la page

"test" est un tableau d'objets dans mes données vue

var vue = new Vue({
  el: '#content',

  data: {
    test: [
      {
        array: [0, 0, 0, 0]
      },
      {
        array: [0, 0, 0, 0]
      }
    ],
    number: 0
  },

  methods: {   
    setNumber: function(){
      this.number = 5;
    },

    setArray: function(){
      this.test[0].array[0] = 9;
    }
  }
})

Le problème est que si je change la valeur d'un élément dans "array", alors que le journal montre que la valeur a changé, il ne se met pas à jour sur la page. D'un autre côté, si je change la valeur de "nombre", les valeurs "nombre" et "tableau" sur la page sont mises à jour.

<section id="content">
  <div>Value in array: {{ test[0].array[0] }}</div>
  <div>Value in number: {{ number }}</div>
  <!-- {{ setNumber() }} -->
  {{ setArray() }}
</section>

<!-- Loading Vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

Comment puis-je rendre ma page sensible à la mise à jour "tableau"?
Voici le JsFiddle: https://jsfiddle.net/zcbh4esr/

javascriptarraysdata-bindingvue.jsvirtual-dom
11
Razinar

Cela est dû aux mises en garde de changement de tablea .

Faites-le comme ça à la place

var vue = new Vue({
  el: '#content',

  data: {
    test: [{
      array: [0, 0, 0, 0]
    }, {
      array: [0, 0, 0, 0]
    }],
    number: 0
  },

  methods: {
    setNumber: function() {
      this.number = 5;
      console.log(this.number);
    },
    setArray: function() {
      //this.test[0].array[0] = 9;
      this.$set(this.test[0].array, 0, 9);
      console.log(this.test[0].array[0]);
    }
  }
});

Voici le violon

17
Vamsi Krishna

Au lieu de mettre à jour des éléments à l'intérieur du tableau, essayez ceci

 this.users = Object.assign({},newList);

Cela mettra à jour le DOM.

0
JD-V