Question

在这个小提琴中：https://jsfiddle.net/djsuperfive/svctngeb/我想在单击按钮时反转structure中的data数组。
为什么呈现的列表和structure的转储没有反应性，而console.log反映出反向有效吗？

代码：

HTML

<div id="app">

  <draggable v-model="structure">
    <div v-for="(item, index) in structure" :style="'background-color:'+item.color">
      {{ item.title }}
    </div>
  </draggable>

  <button type="button" @click="reverse()">Reverse structure</button>

  <hr>
  <strong>dump structure:</strong>
  <pre>
    {{ structure }}
  </pre>
</div>

JS：

new Vue({
  el: '#app',
  data() {
    return {
      structure: [{
          title: 'Item A',
          color: '#ff0000'
        },
        {
          title: 'Item B',
          color: '#00ff00'
        },
        {
          title: 'Item C',
          color: '#0000ff'
        },
      ],
    }
  },
  methods: {
    reverse() {
      console.log(this.structure[0].title);
      _.reverse(this.structure);
      console.log(this.structure[0].title);
    }
  }
});

谢谢

Answer 1

最大！尝试替换行：

_.reverse(this.structure);

使用

this.structure.reverse();

我猜想，Underscore.js没有reverse方法，因为JavaScript具有本机方法。原生JS Array reverse function可以正常工作。祝你好运！

Answer 2

这里的问题似乎是Vue无法检测到您的数组已更改：https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

解决方案是用新数组替换this.structure或使用Vue.set()的反向函数。

this.structure = _.clone(_.reverse(this.structure));

VueJS：反向数据数组无效

2 个答案: