Как v-for в компоненте vue?

Question

[Вячеслав]

Работает:

Vue.component('vue-mark-list', {
	template: '<div>{{marks}}</div>',
	data: function () {
		return {
			marks: {
				1: 1,
				2: 2,
				3: 3
			}
		}
	}
});

Не работает:

Vue.component('vue-mark-list', {
	template: '<div v-for="mark in marks">{{mark}}</div>',
	data: function () {
		return {
			marks: {
				1: 1,
				2: 2,
				3: 3
			}
		}
	}
});

в чем ошибка? :)

Answer 1

[Evgeny Kulakov]

Нет рутового элемента во втором шаблоне, оберните еще в один div:

<div><div v-for="mark in marks">{{mark}}</div></div>

Comments

[Вячеслав]

капец. я 2 часа убил на поиск решения самостоятельно, перепробовал все возможное из документации, а ответ был настолько простой)) спасибо вам, о добрый человек! :)

[Вячеслав]

ну вот, решил одну проблему, не пойму теперь в чем проблема в другом месте

<div>
<a v-for="mark in marks" href="/ca/{{mark.id}}" class="btn btn-darkcyan m-r-xs m-b-xs">{{mark.mark}}</a>
</div>

{{mark.mark}} - интерпретируется нормально в значение
а вот {{mark.id}} так и остается как {{mark.id}}, в итоге ссылка в рендере выглядит как /ca/{{mark.id}}
что ему сейчас не нравится? ))

[Evgeny Kulakov]

Вячеслав, вот так: :href="`/ca/${mark.id}`"

[Вячеслав]

Evgeny Kulakov, неа, не помогло. пустой рендер

<div><a v-for="mark in marks" :href="/ca/{{mark.label}}" class="btn btn-darkcyan m-r-xs m-b-xs">{{mark.mark}}</a></div>

[Evgeny Kulakov]

Вячеслав, я поправил, нотация с двойными скобками только в теле тэга работает.

[Вячеслав]

Evgeny Kulakov, да уж :) своеобразный фреймворк! спасибо еще раз, помогло, пойду дальше ломать мозг)))

[Evgeny Kulakov]

Вячеслав, все в доке есть, читайте)

[Вячеслав]

Evgeny Kulakov, так я вчера часа 3 убил на доку, но ни слова про v-for непосредственно в компоненте.
да и про рутовый div это что-то из серии "ткни в небо" или "догадайся сам", но во втором случае нужно хоть как-то об этом догадываться ))

[Вячеслав]

Evgeny Kulakov, вы были правы. нашел в документации, но все настолько не очевидно описано, что не понимая зачем это - не поймешь где применить :) либо мне не хватает frontend-соображалки, с backend все как-то более прозрачно))