Vuejs - 手风琴

Question

我正在尝试使用vuejs创建一个手风琴.

我在网上找到了一些例子,但我想要的是不同的.对于搜索引擎优化的目的,我使用"是"和"内联模板",所以手风琴是一种静态的,没有在Vuejs中完全创建.

我有2个问题/疑问:

1)我需要根据用户交互(点击)在组件上添加一个"is-active"类,因此我收到以下错误.

属性或方法"contentVisible"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.

这可能是因为我需要在实例级别设置它.但是"contentVisible"具有每个组件不同的值(true或false).

所以我想在实例级别使用一个"contentVisible"数组和一个props(通过实例传递)和子节点上的自定义事件来更新实例值.

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
    }
})

---

更新 我创建以下代码,但是将修改从组件发送到实例的自定义事件不起作用,tabactive不会更改

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>

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 是项目数。

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

您还可以使用哈希来保存要显示的索引和要折叠的索引。

关于第2点：

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