Всем доброго времени суток. Я хочу спросить у знатоков как вы решаете типичную задачу биндинга модели с вложенными списками в vue.js.
Например после get запроса на сервер мы получаем json такого вида
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:[]
}]
}]
Т.е. мы получаем список объектов в котором помимо полей есть списки других объектов(Items) которые в свою очередь имеют список своих объектов(ItemFields).
Теперь например я хочу создать 3 блока:
<select id="cfg-list" class="form-control" multiple=""></select>
В первом будет список корневых элементов массива ("Cfg-1","Cfg-2", etc...) , при нажатии на соответствующий элемент во втором блоке должно отобразиться список всех Items этого объекта ну и при нажатии на какой либо Item в этом списке в третьем отобразится список всех ItemFields.
Второй вопрос вытекает из первого , допустим под каждым select я сделаю еще пару input блоков с данными о текущем выбранном элементе, как обеспечить корректное изменение модели, т.е. например пользователь выбрал Cfg-1, потом Item22 далее из 3 селекта выбрал Field1 в полях input изменил значения FName и Value , как сделать так что бы при этом основная модель так же была изменена возможно ли это?
