S
S
saxer2017-09-15 08:24:29
JavaScript
saxer, 2017-09-15 08:24:29

How to properly bind complex objects in vue.js?

Good day to all. I want to ask the experts how you solve a typical task of model binding with nested lists in vue.js.
For example, after a get request to the server, we get a json like this

var data = [{
  Id: 0,
  Name: "Cfg-1",
  Items: [{
    Id: 11,
    Name: "Item11",
    ItemFields: [{
      FName: "Field1",
      Value: "FV1"
    },
    {
      FName: "Field2",
      Value: "FV2"
    }]
  },
  {
    Id: 12,
    Name: "Item12",
    ItemFields: []
  },
  {
    Id: 13,
    Name: "Item13",
    ItemFields: []
  }]
},
{
  Id: 1,
  Name: "Cfg-2",
  Items: [{
    Id: 21,
    Name: "Item21",
    ItemFields: []
  },
  {
    Id: 22,
    Name: "Item22",
    ItemFields: [{
      FName: "Field1",
      Value: "FV221"
    }]
  },
  {
    Id: 23,
    Name: "Item23",
    ItemFields:[]
  }]
}]

Those. we get a list of objects in which, in addition to fields, there are lists of other objects (Items) which in turn have a list of their objects (ItemFields).
Now for example I want to create 3 blocks:
<select id="cfg-list" class="form-control" multiple=""></select>

The first block will contain a list of the root elements of the array ("Cfg-1","Cfg-2", etc...) , when you click on the corresponding element in the second block, a list of all Items of this object should be displayed, and when you click on any Item in in this list, the third one will display a list of all ItemFields.
The second question follows from the first one, let's say under each select I will make a couple more input blocks with data about the currently selected element, how to ensure that the model changes correctly, i.e. for example, the user selected Cfg-1, then Item22 further from the 3rd select Field1 in the input fields changed the FName and Value values, how to make it so that the main model would also be changed is it possible?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ilya Gerasimov, 2017-09-15
@Omashu

Rebuild the data in such a way that the links refer to one object, changing which, all links will change, or when the object changes, look for it in other places, i.e. manually update, this is if I correctly understood the essence of the issue (1st option is easier and faster to do )

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question