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

Question

So I'm just starting to play with Vue.js and was trying to get the tree view from Vue.js working.

Fetching the data with an AJAX call and displying it is working great.

Here's my problem: I cant figure out how to show/hide elemnts. I was trying to do it the same way as it is shown on the Vue seie: see here All i'm getting is one "open" variable, and not for each category one. Of course every time i toggle it all items are shown/hidden.

I hope this makes it clear:

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

I spend the whole day trying to figure this out...

Thanks in advance for your help!

Answer 1

Finally got Vue.set working:

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