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