我有以下结构的 JSON 数组
items: [
{
ID: 11,
UserID: "test.com",
UserRole: "user",
timeStamp: "2021-03-23T15:54:02.125578",
dialogs: [
{
"Bot": "Why is data missing?",
"test.com": "not available",
"Bot": "please enter ID",
"test.com": "1234"
}
]
}
]
我必须将对话框内的元素显示为列表。我正在使用 v-for 但对话框显示为带逗号的数组。我怎样才能用索引显示这个?以下是我正在使用的 v-for 循环
<ul v-for="item in items" :key="item">
<li v-for="(dialog, index) in dialogs" :key="index">{{key}}: {{dialogs}}</li>
</ul>
答案 0 :(得分:0)
<ul v-for="item in items" :key="item">
<li v-for="(dialog, index) in item.dialogs" :key="index">{{index}}: {{dialog}}</li>
</ul>
答案 1 :(得分:0)
需要进行 2 次更改。
dialogs
中,您有重复的键,因此需要将它们分成两个不同的对象。items.dialogs
这是完整的代码。
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
items: [
{
ID: 11,
UserID: "test.com",
UserRole: "user",
timeStamp: "2021-03-23T15:54:02.125578",
dialogs: [
{
"Bot": "Why is data missing?",
"test.com": "not available",
},
{"Bot": "please enter ID",
"test.com": "1234"
}
]
}
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul v-for="(item, index) in items" :key="item">
<li v-for = "(data, index) in item.dialogs">
{{data}} {{index}}</li>
</ul>
</div>