Vuejs-手风琴

Question

我正在尝试使用 vuejs 创建手风琴。

我在网上找到了一些例子，但我想要的是不同的。出于 SEO 目的，我使用“is”和“inline-template”，所以手风琴是一种静态的，没有完全在 Vuejs 中创建。

我有 2 个问题/疑问：

1）我需要根据用户交互（点击）在组件上添加一个类“is-active”，因此我收到以下错误。

属性或方法“contentVisible”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明响应式数据属性。

这可能是因为我需要在实例级别设置它。但是“contentVisible”对于每个组件都有不同的值（true 或 false）。

所以我想在实例级别使用一个“contentVisible”数组和一个道具（通过实例）和子项上的自定义事件来更新实例值。

2）可以工作，但它是一个静态数组。如何制作动态数组（不知道项目组件的数量）？

 <div class="accordion">
    <div>
        <div class="accordion-item" is="item"  inline-template :class="{ 'is-active':  contentVisible}" >
            <div>
                <a @click="toggle" class="accordion-title"> Title A1</a>
                <div v-show="contentVisible" class="accordion-content">albatros</div>
            </div>
        </div>
        <div class="accordion-item" is="item"  inline-template :class="{ 'is-active': contentVisible}" >
            <div>
                <a @click="toggle" class="accordion-title"> Title A2</a>
                <div v-show="contentVisible" class="accordion-content">lorem ipsum</div>
            </div>
        </div>

    </div>

 var item = {
  data: function() {
      return {
          contentVisible: true
      }
  },

  methods: {
      toggle: function(){
          this.contentVisible = !this.contentVisible
      }
  }
}

new Vue({
    el:'.accordion',
    components: {
        'item': item
    }
})

---

更新 我创建了以下代码但是将修改从组件发送到实例的自定义事件不起作用，tabsactive 没有改变

var item = {
  props: ['active'],
  data: function() {
      return {
          contentVisible: false
      }
  },
  methods: {
      toggle: function(index){
          this.contentVisible = !this.contentVisible;
          this.active[index] = this.contentVisible;
          **this.$emit('tabisactive', this.active);**
          console.log(this.active);
      }
  }
}

new Vue({
    el:'.accordion',
    data: {
      tabsactive: [false, false]
    },
    components: {
        'item': item
    }
})

---

 <div class="accordion" **@tabisactive="tabsactive = $event"**>
        <div class="accordion-item" is="item"  inline-template :active="tabsactive" :class="{'is-active': tabsactive[0]}">
            <div>
                <a @click="toggle(0)" class="accordion-title"> Title A1</a>
                <div v-show="contentVisible" class="accordion-content">albatros</div>
            </div>
        </div>
        <div class="accordion-item" is="item"  inline-template :active="tabsactive" :class="{'is-active': tabsactive[1]}">
            <div>
                <a @click="toggle(1)" class="accordion-title" > Title A2</a>
                <div v-show="contentVisible" class="accordion-content">lorem ipsum</div>
            </div>
        </div>
</div>

原文由 user3541631 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

关于第 1 点：

您必须将 contentVisible 定义为 vue 实例变量，因为您已使用 vue 指令 v-show 访问它，它会在 vue data 、 watchers 、 methods 等中搜索它，如果它没有找到任何引用，它会引发此错误。

由于您的 accordion 元素与父组件关联，您可能必须在其中添加 contentVisible 数据，如下所示：

 new Vue({
    el:'.accordion',
    data: {
       contentVisible: true
    }
    components: {
        'item': item
    }
})

如果您有多个项目，您可以使用其他一些技术来显示其中一个，例如有一个数据变量 visibleItemIndex 可以从 1 变为 n-1，其中 n 是项目数。

在这种情况下，您将在 HTML 中包含 v-show="visibleItemIndex == currentIndex" 。

您还可以使用散列来保存要取消显示的索引和要折叠的索引。

关于第 2 点：

如果你有动态数组，你可以使用 v-for 。您可以在此处查看文档。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这对我有用：

 <template>
    <div>
        <ul>
            <li v-for="index in list" :key="index._id">

                <button @click="contentVisible === index._id ? contentVisible = false : contentVisible = index._id">{{ index.title }}</button>

                <p v-if='contentVisible === index._id'>{{ index.item }}</p>

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "sameName",
        data() {
            return {
                contentVisible: false,
                list: [
                    {
                    _id: id1,
                    title: title1,
                    item: item1
                    },
                    {
                    _id: id2,
                    title: title2,
                    item: item2
                    }
                ]
            };
        },
    };
</script>

原文由 Ismael Soschinski 发布，翻译遵循 CC BY-SA 4.0 许可协议