切换循环?

时间:2017-08-18 11:10:35

标签: vue.js vuejs2

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

我有这个:

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

1 个答案:

答案 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});
    }

  },