Question

我有一系列DIV需要循环显示：

  <div v-for="(part, index) in verses" :key="index"
       v-show="showSlides[index]">
    <pre>{{ part }}</pre>
  </div>

以下是相关的vue.js代码：

  data: {
    verses: ['first line', 'second line'],
    showSlides: [true, false]
  },
  methods: {
    show (slideNo) {
        for (let index = 0; index < this.showSlides.length; index++) {
          this.showSlides[index] = false
        }
        this.showSlides[slideNo] = true
    }
  }

它最初工作正常（显示第一行，但不是第二行），但是当我运行 show 方法来更改 showSlides 数组时，它不会有任何影响。

可以在此处找到 Codepen ：https://codepen.io/matthiku/pen/aYLjOx?editors=1111

为什么这不按预期工作？这是反应性和对象/阵列修改的问题吗？

Answer 1

我会像你这样设置data。

data () {
  return {
    verses: [
      { name: 'first line', show: true }, 
      { name: 'second line', show: false }
    ]
  }
}

在div for循环中，循环为true并获取show中verses的值

<div v-for="verse in verses" :key="verse.name" v-show="verse.show">
  <pre>{{ verse }}</pre>
</div>

此方法使您的代码比向其添加更多内容更清晰。

Answer 2

Ru Chern Chong的回答非常好，但我也找到了另一种解决方案，它并不要求我将＆＃34; DIV＆＃34; s的数组更改为一个对象（我的代码示例）只是一个更大项目的一小部分。）

所以不是这一行：

this.showSlides[slideNo] = true

我现在使用这个Vue.js语法：

this.$set(this.showSlides, slideNo, true)

我的解决方案受到本文的启发： https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

使用一个true / false值数组来显示/隐藏带有v-show的元素

2 个答案: