循环切换？

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 的切换函数，它将“点击”项上的属性设置为 true 或 false（我应该提到该属性在对象上尚不存在，而且我还没有可以添加它，因为我们从 API 获取 JSON）

切换功能是这样的：

toggle: function (data) {
    data.clicked = !data.clicked;
  },

现在，当我在上面执行此操作时，我收到一条错误消息：“属性或方法“子项”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性”

我猜我得到这个是因为对象中不存在“clicked”属性......那么我该如何解决这个问题？看不到任何真正的解决方案？

Answer 1

您将v-for 中的subitem 初始化为循环中的单个项目，但是您在具有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 移动到带有 v-for 循环的 div 内

      <!-- 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>

接下来是第二期，正如您提到的，当您从 api 获取 json 时，子项 obj 没有 clicked 属性。

创建 vue 实例后，您无法添加根级别的响应式属性。

由于您想根据属性 clicked 切换 div 的外观，该属性在创建 vue 实例时不可用，您应该使用 vm.$set() 添加响应属性或使用 Object.assign() 将属性添加到现有目的。见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});
    }

  },