vuejs将对象数据绑定到屏幕上，屏幕将以循环结束

Question

我有一个挑战，我正在尝试将我的对象数据绑定到屏幕上，当添加更多项目时，这些数据最终会循环。我如何使括号在渲染过程中消失请提供任何帮助

new Vue({
el: "#app",
data: {
box:  [
{
"Title": "Welcome!",

"Topics": [
{
"Title": "Overview of Courses"
},
{
"Title": "tETS 1"
},
{
"Title": "TEST 3"
},
{
"Title": "TEST 4"
},
{
"Title": "TEST 5"
}
],
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "Module 500: test test",
"Modules": [
{
"Title": "GRADE WORK",
"Modules": [],
"Topics": [
{
"Title": "1.1 [Assignments] SET UP",
"Description": {
"Html": "<div class="container">n<h2>Description</h2>n<p>Pick two differently shaped objects that are white.</div>"
}
}
],
"LastModifiedDate": "2020-10-30T01:20:30.627Z",
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "act gas",
"Modules": [],
"Topics": [
{
"Title": "Introduction"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.780Z",
"Description": {
"Text": "",
"Html": ""
}
}
],
"Topics": [
{
"Title": "Intro"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.273Z",
"Description": {
"Text": "",
"Html": ""
}
}
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<div v-for="box_data in box" :key="box_data.id">
<strong><span class="text-center bold"> {{ box_data.Title}} </span></strong>
<ul v-for="topics in box_data.Topics" :key="topics.id">
<li> {{ topics }} </li>
</ul>
</div>
</div>

Answer 1

您当前正在渲染整个topics对象，但只需要该对象的Title属性，因此请更新字符串插值以渲染该特定属性：

<ul v-for="topics in box_data.Topics" :key="topics.id">
👇
<li> {{ topics.Title }} </li>
</ul>

new Vue({
el: "#app",
data: {
box:  [
{
"Title": "Welcome!",

"Topics": [
{
"Title": "Overview of Courses"
},
{
"Title": "tETS 1"
},
{
"Title": "TEST 3"
},
{
"Title": "TEST 4"
},
{
"Title": "TEST 5"
}
],
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "Module 500: test test",
"Modules": [
{
"Title": "GRADE WORK",
"Modules": [],
"Topics": [
{
"Title": "1.1 [Assignments] SET UP",
"Description": {
"Html": "<div class="container">n<h2>Description</h2>n<p>Pick two differently shaped objects that are white.</div>"
}
}
],
"LastModifiedDate": "2020-10-30T01:20:30.627Z",
"Description": {
"Text": "",
"Html": ""
}
},
{
"Title": "act gas",
"Modules": [],
"Topics": [
{
"Title": "Introduction"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.780Z",
"Description": {
"Text": "",
"Html": ""
}
}
],
"Topics": [
{
"Title": "Intro"
}
],
"LastModifiedDate": "2020-10-30T01:20:30.273Z",
"Description": {
"Text": "",
"Html": ""
}
}
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<div v-for="box_data in box" :key="box_data.id">
<strong><span class="text-center bold"> {{ box_data.Title}} </span></strong>
<ul v-for="topics in box_data.Topics" :key="topics.id">
<li> {{ topics.Title }} </li>
</ul>
</div>
</div>