我正在尝试使用vuejs创建一个手风琴.
我在网上找到了一些例子,但我想要的是不同的.对于搜索引擎优化的目的,我使用“是”和“内联模板”,所以手风琴是一种静态的,没有在Vuejs中完全创建.
我有2个问题/疑问：
1)我需要根据用户交互(点击)在组件上添加一个“is-active”类,因此我收到以下错误.
Property or method “contentVisible” is not defined on the instance but
referenced during render. Make sure to declare reactive data
properties in the data option.
这可能是因为我需要在实例级别设置它.但是“contentVisible”具有每个组件不同的值(true或false).
所以我想在实例级别使用一个“contentVisible”数组和一个props(通过实例传递)和子节点上的自定义事件来更新实例值.
2)可以工作,但它是一个静态数组.如何制作动态数组(不知道项目组件的数量)？
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
}
})
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
