VueJS - 列表数组和独立显示/隐藏

Question

我正试图弄清楚如何让我的每一个项目都被列出，独立地隐藏和显示，目前当你打开一个时，另一个也会打开。我需要使用某种索引吗？我使用 v-show 是因为我需要事先渲染内容并在加载时隐藏但在点击时显示。

<template>
    <div>
        <div v-for="item in items" :key="item">
            {{ item.title }}

            <div v-if="item.examples != null">
                <a v-on:click="visibleExample = !visibleExample">Example</a>
                <transition name="fade">
                    <div v-show="visibleExample">
                        <div v-for="example in item.examples" :key="example">
                            {{ example }}
                        </div>
                    </div>
                </transition>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visibleExample: false,
                items: [{
                        title: 'Title',
                        examples: [
                            'Question',
                            'Answer'
                        ]
                    },
                    {
                        title: 'ABC',
                        examples: [
                            '1',
                            '2',
                            '3',
                            '4',
                            '5'
                        ]
                    }
                ]
            }
        }
    }
</script>

请注意：为简单起见，这是我原始代码的精简版。

Answer 1

您可以使用新的辅助项目列表，并且可以为项目列表的每个对象附加一个新的boolean 属性。然后你可以在你的v-for 上使用auxItems，如下所示：

Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
  el: "#app",
  data() {
    return {
      items: [
        {
          title: 'Title',
          examples: [
            'Question',
            'Answer'
          ]
        },
        {
          title: 'ABC',
          examples: [
            '1',
            '2',
            '3',
            '4',
            '5'
          ]
        }
    	],
      auxItems: []
    }
  },
  mounted () {
    this.auxItems = this.items.map(i => ({ ...i, isVisible: false }))
  }
})

.item {
  border: 1px solid black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item in auxItems" :key="item.title" class="item">
    {{ item.title }}
    <div v-if="item.examples !== null">
      <a v-on:click="item.isVisible = !item.isVisible">Example</a>
      <transition name="fade">
        <div v-show="item.isVisible">
          <div v-for="example in item.examples" :key="example">
            {{ example }}
          </div>
        </div>
      </transition>
    </div>
  </div>
</div>

Answer 2

您有三个主要选择：

1. 对visibleExample 使用布尔数组，并按索引与items 配对。配对可以使用来自v-for 的索引在模板中执行，也可以使用计算属性“合并”两个数组。
2. 为您的每个items 添加一个布尔属性，用于保存是否应为该特定项目显示示例。
3. 提取一个单独的组件来表示一个项目。这可能包括v-for 中的所有内容或仅包括示例部分。无论哪种方式，data 中都会有一个visibleExample 属性，每个组件都拥有自己的状态。这通常是最好的解决方案，但如果您需要组件外部的visibleExample 状态，它可能会变得很繁琐。对于问题中的代码，这不是问题，但这取决于完整代码的外观。

Answer 3

正如您所建议的，解决此问题的一种方法是跟踪当前选定的项目。

这可以通过这样做来实现：

<div v-if="item.examples != null">
   <a v-on:click="visibleExample = !visibleExample; crtSelectedItem = item">Example</a>
   <transition name="fade">
    <div v-show="visibleExample && item.id === crtSelectedItem.id">
        <div v-for="example in item.examples" :key="example">
           {{ example }}
        </div>
     </div>
   </transition>
 </div>