Как правильно осуществлять биндинг сложных объектов в vue.js?

Question

[saxer]

Всем доброго времени суток. Я хочу спросить у знатоков как вы решаете типичную задачу биндинга модели с вложенными списками в 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 , как сделать так что бы при этом основная модель так же была изменена возможно ли это?

Answer 1

[0xD34F]

Сделать компонент для отображения одного списка и создать несколько экземпляров - по одному на каждый уровень вложенности. Следующий рендерится только если что-то выбрано в предыдущем. Где надо редактировать данные - можно передавать соответствующие элементы управления через слоты.

https://jsfiddle.net/94xbndhm/

Answer 2

[Илья Герасимов]

Перестроить данные таким образом, чтобы связи ссылались на один объект, изменив который, изменятся и все связи или при изменение объекта, искать его в других местах, т.е вручную обновлять, это если я правильно понял суть вопроса (1 вариант проще и быстрее сделать)