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

Question

因此，我刚刚开始使用Vue.js，并试图从Vue.js中获取树状视图。

通过AJAX调用获取数据并显示该数据非常有效。

这是我的问题：我不知道如何显示/隐藏要素。 我试图以与Vue seie上显示的方式相同的方式执行此操作： 请参阅此处，我所得到的只是一个“开放”变量，而不是针对每个类别。 当然，每次我切换它时，所有项目都会显示/隐藏。

我希望这可以使您清楚：

{
  "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
},