vuejs bind object data to screen that will end up looping - arrays

Question

I have a challenge, i am trying to bind my object data on the screen that will eventually loop when there are more items added. How do i make the brackets dissapear during render Any help please
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

You're currently rendering the entire topics object, but you only need the Title property of that object, so update your string interpolation to render that specific property:
<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>