web-dev-qa-db-ja.com

Vue.js-更新された配列項目の値がページで更新されません

「test」は、my vue dataのオブジェクトの配列です。

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;
    }
  }
})

問題は、「配列」内の要素の値を変更すると、ログで値が変更されたことを示しているのに、ページで更新されないことです。一方、「数値」の値を変更すると、ページ上の「数値」と「配列」の両方の値が更新されます。

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

「配列」の更新にページを応答させるにはどうすればよいですか？
これがJsFiddleです： https://jsfiddle.net/zcbh4esr/

javascriptarraysdata-bindingvue.jsvirtual-dom
11
Razinar

これは 配列変更の警告 が原因です。

代わりにこのようにしてください

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]);
    }
  }
});

これが フィドル です

17
Vamsi Krishna

配列内のアイテムを更新する代わりに、これを試してください

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

これにより、DOMが更新されます。

0
JD-V