API响应数据显示时显示括号(vuejs)

Question

我的响应中有一个manyTomany字段(讨论会成员)，当显示这些值时，该字段位于括号内。我无法找到一种方法，只收回值/删除括号，就像我使用v进行显示一样。

步骤程序是我在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)
    })

这是我得到的结果：小组成员的结果是括号

谢谢！！

Answer 1

您可以通过迭代子组件中的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>

​

Answer 2

这是因为this.programs中的每个this.programs都是一个数组。

使用v-for an <step-program/>组件循环遍历数组

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