API response data showing brackets when displayed (vuejs)

user_19148138 0
Viewed 51

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

vue.js javascript
2 Answers

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

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>

user_41163000
Related