Изучая Vue, столкнулся с проблемой. В документации есть пример с нумерованным списком:
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [{
id: 0,
text: 'Овощи'
}, {
id: 1,
text: 'Сыр'
}, {
id: 2,
text: 'Что там ещё люди едят?'
}]
}
});
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Но, когда я пытаюсь перерисовать все это дело под выпадающий список select
, то этот список не заполняется никакими данными. Переделанный мною код:
// Определяем новый компонент под именем todo-item
Vue.component('todo-item', {
props: ['todo'],
template: '<option > {{ todo.text }}</option>'
});
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [{
id: 0,
text: 'Овощи'
}, {
id: 1,
text: 'Сыр'
}, {
id: 2,
text: 'Что там ещё люди едят?'
}]
}
});
<div id="app-7">
<select>
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Прошу найти решение и дать некоторые пояснения к данной проблеме.