切换循环？

Question

我希望在点击标题时切换（显示/隐藏）列表，但无法让以下内容工作

我有这个：

          <!-- 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;属性不存在于对象中......那么我该如何解决这个问题呢？无法看到任何真正的解决方案？

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

  },