Question

所以我刚开始玩Vue.js，并试图让Vue.js的树视图工作。

使用AJAX调用获取数据并对其进行处理是很有效的。

这是我的问题：我无法弄清楚如何显示/隐藏元素。我尝试的方式与Vue上显示的方式相同：see here 我得到的只是一个“开放”变量，而不是每个类别。当然，每当我切换它时，所有项目都会显示/隐藏。

我希望这说清楚：

{
  "open": false,
  "list": {
        "categories": [
          {
            "id": 1,
            "name": "Some Category",
            "created_at": "2015-12-31 10:10:58",
            "updated_at": "-0001-11-30 00:00:00",
            "items": [
              {
                "id": 1,
                "category_id": 1,
                "name": "Some Item",
                "description": "Lorem",
                "price": 10,
                "created_at": "2015-12-31 10:11:45",
                "updated_at": "-0001-11-30 00:00:00"
              },
              {
                "id": 8,
                "category_id": 1,
                "name": "Some Item",
                "description": "Lorem",
                "price": 10,
                "created_at": "2015-12-31 11:56:44",
                "updated_at": "2015-12-31 11:56:44"
              },
              {
                "id": 32,
                "category_id": 1,
                "name": "aa",
                "description": "        \r\n    ",
                "price": 122,
                "created_at": "2016-01-07 14:46:43",
                "updated_at": "2016-01-07 14:46:43"
              }
            ]
          },
          {
            "id": 2,
            "name": "Some Category",
            "created_at": "2015-12-31 10:10:58",
            "updated_at": "-0001-11-30 00:00:00",
            "items": [
              {
                "id": 2,
                "category_id": 2,
                "name": "Some Item",
                "description": "Lorem",
                "price": 30,
                "created_at": "2015-12-31 10:11:45",
                "updated_at": "-0001-11-30 00:00:00"
              },
              {
                "id": 3,
                "category_id": 2,
                "name": "Some Item",
                "description": "Lorem",
                "price": 20,
                "created_at": "2015-12-31 10:13:06",
                "updated_at": "-0001-11-30 00:00:00"
              }
            ]
        }
     ]
  }
}

我花了一整天的时间试图解决这个问题......

提前感谢您的帮助！

Answer 1

终于让Vue.set工作了：

toggle: function (category) {
    if(! category.open)
    {
        Vue.set(category, 'open' , false)
    }
    category.open = !category.open
},

Vue.js树视图与来自AJAX调用的数据

1 个答案: