API response data showing brackets when displayed (vuejs)-CodePudding

I have a manyTomany field (panelists) within my response that, when displayed, the values are inside brackets. i couldn't find a way to retract only the values/remove the brackets as I do the display with a v-for.

step-program is a component I created in my Vue project:

<step-program
 v-for="(item, index) in programs" :item="program" :key="index"
 :start_time="item.start_time| formatDate"
 :end_time="item.end_time| formatDate"
 :topic ="item.topic"
 :panelNames="item.panelists">
</step-program>

Here is the axios code :

mounted() {
  axios.get("http://127.0.0.1:8000/api/programs/")
    .then(response => {
      this.programs = response.data
    })

    .catch(error => {
      console.log(error)
    })

This is the result I get : panelists result in brackets

Thanks!!

CodePudding user response：

It's because each item inside this.programs is an array.

Use v-for inside <step-program/> component to loop through an array

<p v-for="(string, id) in items" :key="id">
{{string}}
</p>

CodePudding user response：

You can achieve this by iterating panelNames props in the child component as item.panelists is an array and can be iterable further. Hence, from parent pass this as an array and iterate in child as per the requirement.

Demo :

Vue.component('child', {
  // declare the props
  props: ['topic', 'panelNames'],
  template: `<div><h4> {{ topic }} </h4>
                     <ul v-for="(name, index) in panelNames" :key="index">
                    <li>{{ name }}</li>
             </ul></div>`
});

var app = new Vue({
  el: '#app',
  data: {
        programs: [{
        topic: 'Topic A',
        panelists: ['Panel 1', 'Panel 2']
      }, {
        topic: 'Topic B',
        panelists: ['Panel 3', 'Panel 4']
      }, {
        topic: 'Topic C',
        panelists: ['Panel 5', 'Panel 6']
      }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <child v-for="(item, index) in programs"
         :key="index"
         :topic="item.topic"
         :panel-names="item.panelists">
  </child>
</div>