Tengo un campo manyTomany ( panelistas ) dentro de mi respuesta que, cuando se muestra, los valores están entre paréntesis. No pude encontrar una manera de retraer solo los valores/eliminar los corchetes mientras hago la pantalla con una v-for.
step-program es un componente que creé en mi proyecto 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>Aquí está el código de axios:
mounted() { axios.get("http://127.0.0.1:8000/api/programs/") .then(response => { this.programs = response.data }) .catch(error => { console.log(error) })Este es el resultado que obtengo: resultado de los panelistas entre paréntesis
¡¡Gracias!!
Es porque cada item dentro this.programs es una matriz.
Use v-for dentro del componente <step-program/> para recorrer una matriz
<p v-for="(string, id) in items" :key="id"> {{string}} </p>Puede lograr esto iterando los accesorios panelNames en el componente secundario, ya que item.panelists es una matriz y se puede iterar más. Por lo tanto, desde el padre, pase esto como una matriz e itere en el hijo según el requisito.
demostración :
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>