我希望在点击标题时切换(显示/隐藏)列表,但无法让以下内容工作
我有这个:
<!-- Title -->
<div v-for="(subitem, index) in item" v-if="index === 0" @click="toggle(subitem)">
{{subitem.system_name}} - ({{item.length}})
</div>
<!-- All title items that should expand on click "Title" -->
<div v-if="subitem.clicked">
<p>{{subitem.system_name}}</p>
</div>
当点击im触发一个名为toggle的切换功能时,它会在项目上设置一个属性&#34;点击&#34;是真还是假(我应该提到这个属性在对象上不存在,并且我没有可能添加它,因为我们从API获取JSON)
切换功能是:
toggle: function (data) {
data.clicked = !data.clicked;
},
现在,当我执行上述操作时,我收到错误消息:&#34;属性或方法&#34; subitem&#34;未在实例上定义,但在呈现期间引用。确保在数据选项&#34;
中声明反应数据属性 我猜这是因为&#34;点击了&#34;属性不存在于对象中......那么我该如何解决这个问题呢?无法看到任何真正的解决方案?答案 0 :(得分:1)
您将subitem
中的v-for
初始化为循环中的单个项目,但您在其上有v-for
循环的元素之外使用它。这就是你得到这个警告的原因:
Property or method "subitem" is not defined on the instance but referenced during render.
Make sure to declare reactive data properties in the data option"
所以移动要div
切换到div
上面有v-for
循环的 <!-- Title -->
<div v-for="(subitem, index) in item" v-if="index === 0" @click="toggle(subitem)">
{{subitem.system_name}} - ({{item.length}})
<!-- All title items that should expand on click "Title" -->
<div v-if="subitem.clicked">
<p>{{subitem.system_name}}</p>
</div>
</div>
clicked
第二期即将到来,正如你提到的那样,当你从api中获取json时,subitem obj没有clicked
属性。
创建vue实例后,无法添加根级别响应属性。
由于您希望根据在创建vue实例时不可用的属性vm.$set()
切换div的appeance,您应该使用Object.assign()
添加反应属性或{{1} }向现有对象添加属性。见Reactivity in depth
所以在你的情况下
toggle: function (data) {
if(data.hasOwnProperty('clicked')){
data.clicked = !data.clicked;
}else{
//since its the first time , set the value pf clicked to true to show the subitem
data = Object.assign({}, data, {clicked: true});
}
},