我的回復中有一個 manyTomany 欄位（小組成員），當顯示時，值在括號內。當我使用 v-for 進行顯示時，我找不到僅收回值/洗掉括號的方法。
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)
})
這是我得到的結果： 小組成員在括號中
謝謝！！
uj5u.com熱心網友回復：
panelNames您可以通過將子組件中的 props 作為陣列進行迭代來實作這一點，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>uj5u.com熱心網友回復：
這是因為每個item內部this.programs都是一個陣列。
在組件內部使用 v-for<step-program/>回圈遍歷陣列
<p v-for="(string, id) in items" :key="id">
{{string}}
</p>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/478077.html
標籤：javascript Vue.js