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 > {{ box_data.Title}} </span></strong>

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

CodePudding user response：

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">