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