Question

案例-更改标题复选框时需要选择/取消选择所有复选框。

问题-我可以发出和接收事件。可以看到我修改后的数据数组。但是我猜有些反应在Vue中不起作用。

我已经在CodeSandbox上列出了非常简单的剪切示例-https://88nz9z64j0.codesandbox.io/

代码-

注意-这与Array突变有关。因为我可以选择单个复选框，并且在全部选中后可以看到我的标题复选框标记为“ check”。但是，反向并非只是通过相同的机制发生的。多么奇怪！

必须向Array(100).fill(length)学习作为反应性数据，否则我做的事情很愚蠢。

Answer 1

问题是Array.fill正在修改数组。 Vue can't detect changes to an array when you directly modify its elements。您需要先使用split创建一个新数组，修改新创建的数组，然后重新分配它。

this.checkSelections = this.checkSelections.splice(0).fill(allSelected);

CodeSandbox

Answer 2

在table / index.vue的挂载函数上，更改数组后可以使用this。$ forceUpdate（），因为vue无法看到更改。

mounted() {
  this.$root.$on("selectAll", ({ allSelected }) => {
    console.log("selectAll index.vue", allSelected);
    this.checkSelections = this.checkSelections.fill(allSelected);
    console.log("selectAll", this.checkSelections);
    this.$forceUpdate(); 
  });
}

您可以在the documentation

上查看更多详细信息

Working example

Answer 3

您应该查看这篇有关vue的反应性的文章，它会误解https://medium.com/js-dojo/reactivity-in-vue-js-and-its-pitfalls-de07a29c9407，并确定有关数组的部分。

对于数组，您最好利用Vue.set

请参阅fork：https://codesandbox.io/s/m7xqk9qn0j

 for(var i = 0; i <= this.checkSelections.length; i++)
 {
      Vue.set(this.checkSelections, i , allSelected);
 }

详细信息也可以在官方Vue网站上找到： https://vuejs.org/v2/guide/list.html#Caveats （在这种情况下，数组的长度不会改变，因此请注意1）

通过$ emit选择所有chekbox不会重新呈现视图-Vuejs

3 个答案: