API 显示时显示括号的响应数据（vuejs）

Question

我的回复中有一个 manyTomany 字段 (panelists)，当显示时，值在括号内。当我用 v-for 进行显示时，我找不到只缩回 values/remove 括号的方法。

step-program 是我在我的 Vue 项目中创建的一个组件：

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

这是 axios 代码：

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

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

这是我得到的结果： panelists result in brackets

谢谢！！

Answer 1

因为this.programs里面的每个item都是一个数组

在 <step-program/> 组件中使用 v-for 循环数组

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

Answer 2

您可以通过在子组件中迭代 panelNames 道具来实现这一点，因为 item.panelists 是一个数组并且可以进一步迭代。因此，从父级将其作为数组传递并根据要求在子级中迭代。

演示 :

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>

API 显示时显示括号的响应数据（vuejs）

API response data showing brackets when displayed (vuejs)

javascript

vue.js