반응형
소품 포함 VueJ 중첩 목록 렌더링
Vue.js를 사용하여 중첩 목록을 렌더링하려고 하는데 중첩된 구성 요소 부분에서 코드가 실패합니다.기본 템플릿:
<body>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
<ul>
<todo-item v-for="subtodo in todo.subTodos" v-bind:subtodo="subtodo"></todo-item>
</ul>
</li>
</ul>
</div>
</body>
그리고 내 js 파일:
Vue.component('todo-item', {
template: '<li>{{subtodo.text}}</li>',
prop: ['subtodo']
})
var app = new Vue({
el: '#app',
data: function () {
return {
todos : [
{
text : 'Learn JavaScript',
subTodos : [
{ text : 'Linting'},
{ text : 'Bundling'},
{ text : 'Testing'}
]
},
{
text : 'Learn Vue',
subTodos : [
{ text : 'Components'},
{ text : 'Virtual DOM'},
{ text : 'Templating'}
]
},
{
text : 'Build something awesome',
subTodos : [
{ text : 'Build'},
{ text : 'Something'},
{ text : 'Awesome'}
]
}
]
}
}
})
으로는 첫 번째 본 with 、 본 、 basically 、 basically 、 basically 、 basically 、 basically 、 basically 、 basically 、 basically 、 basically 、 。v-for을 실시합니다 이 는 서브컴포넌트에 됩니다.v-bind현재 인스턴스를 사용하여 자녀의 템플릿에서 사용할 수 있습니다.
https://jsfiddle.net/ny7a5a3y/4/에서 작업을 하고 있습니다.
콘솔에 다음 오류가 나타납니다.
[Vue warn]: Property or method "subtodo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
제가 무엇을 빠뜨리고 있나요?
오타입니다. 컴포넌트에 있는 소품이 소품이라고 하셨죠.
Vue.component('todo-item', {
template: '<li>{{subtodo.text}}</li>',
props: ['subtodo']
})
https://jsfiddle.net/uofmd96q/
이것을 시험해 보세요.
<todo-item v-for="st of todo.subTodos" :subtodo="st"></todo-item>
클릭 시 중첩 목록을 렌더링해야 하는 경우 나중에 참조할 수 있도록 항목 색인을 사용하여 만든 매우 간단한 중첩 목록 예제입니다.
<div v-for="(aggList, index) in aggregationList">
<div v-on:click="LoadAggIndex(index)">
{{aggList.name}} and index: {{index}}
</div>
</div>
<div v-for="agg in loadedAggList">
{{agg.key}}
{{agg.count}}
</div>
Vue.js
methods: {
LoadAggIndex: function (index) {
SearchBar.loadedAggList = SearchBar.aggregationList[index].aggregates;
}
}
언급URL : https://stackoverflow.com/questions/41110825/vuejs-nested-list-rendering-with-props
반응형
'IT이야기' 카테고리의 다른 글
| 매크로를 정의할 때 do while(0)이 무슨 소용이 있습니까? (0) | 2022.07.23 |
|---|---|
| Vue2 + Vuex 커밋이 실행되지 않음(Vue devtools 미포함) (0) | 2022.07.23 |
| Sinon은 Vue 이벤트에 의해 트리거된 Vue 컴포넌트 메서드를 어떻게 감시합니까? (0) | 2022.07.19 |
| 새 줄에 의한 Java 문자열 분할 (0) | 2022.07.19 |
| VueX가 어레이 데이터를 상태 그대로 교체합니다. (0) | 2022.07.19 |