英文:
v-for looping through nested arrays
问题
在列出的元素中，我尝试实现一个v-for循环，它应该迭代script部分中的项目。
HTML代码如下：
<li
v-for="item in icludedItems.basicPackage"
class="flex items-center space-x-3">
<!-- 图标 -->
<IconsCheck />
<span>{{ item.basicPackage }}</span>
</li>
脚本部分看起来像这样：
data() {
return {
icludedItems: [
{
freePackage: [
this.$t('pricing.packages.free.includedUsers'),
this.$t('pricing.packages.free.includedModules'),
this.$t('pricing.packages.free.includedLocations'),
this.$t('pricing.packages.free.includedProviders'),
],
basicPackage: [
this.$t('pricing.packages.basic.includedUsers'),
this.$t('pricing.packages.basic.includedModules'),
this.$t('pricing.packages.basic.includedLocations'),
this.$t('pricing.packages.basic.includedProviders'),
],
advancedPackage: [
this.$t('pricing.packages.advanced.includedUsers'),
this.$t('pricing.packages.advanced.includedModules'),
this.$t('pricing.packages.advanced.includedLocations'),
this.$t('pricing.packages.advanced.includedProviders'),
],
premiumPackage: [
this.$t('pricing.packages.premium.includedUsers'),
this.$t('pricing.packages.premium.includedModules'),
this.$t('pricing.packages.premium.includedLocations'),
this.$t('pricing.packages.premium.includedProviders'),
],
},
],
};
},
然而，采用这种方法不会显示任何内容，但也不会报错。
如果我从includedItems中移除嵌套的数组，它就能按预期工作。
有没有人知道我做错了什么？谢谢 
英文:
In a listed element I'm trying to implement a v-for loop which should iterate the items in the script section.
The HTML code looks like this:
<li
v-for="item in icludedItems.basicPackage"
class="flex items-center space-x-3">
<!-- Icon -->
<IconsCheck />
<span>{{ item.basicPackage }}</span>
</li>
Script sections looks like this:
data() {
return {
icludedItems: [
{
freePackage: [
this.$t('pricing.packages.free.includedUsers'),
this.$t('pricing.packages.free.includedModules'),
this.$t('pricing.packages.free.includedLocations'),
this.$t('pricing.packages.free.includedProviders'),
],
basicPackage: [
this.$t('pricing.packages.basic.includedUsers'),
this.$t('pricing.packages.basic.includedModules'),
this.$t('pricing.packages.basic.includedLocations'),
this.$t('pricing.packages.basic.includedProviders'),
],
advancedPackage: [
this.$t('pricing.packages.advanced.includedUsers'),
this.$t('pricing.packages.advanced.includedModules'),
this.$t('pricing.packages.advanced.includedLocations'),
this.$t('pricing.packages.advanced.includedProviders'),
],
premiumPackage: [
this.$t('pricing.packages.premium.includedUsers'),
this.$t('pricing.packages.premium.includedModules'),
this.$t('pricing.packages.premium.includedLocations'),
this.$t('pricing.packages.premium.includedProviders'),
],
},
],
};
},
However, with this approach no content will be displayed, but also no error.
If I'm removing the nested arrays from includedItems it works as expected.
Anyone a idea what I'm doing wrong? Thanks.
答案1
得分: 1
请尝试以下代码片段。(basicPackage 是 icludedItems 数组中第一个对象的属性)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const app = Vue.createApp({
data() {
return {
icludedItems: [
{
freePackage: [
1,2,3,4
],
basicPackage: [
5,6,7,8
],
advancedPackage: [
9,10,11,12
],
premiumPackage: [
13,14,15,16
],
},
],
};
},
})
app.mount('#demo')
<!-- language: lang-html -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<ul>
<li v-for="item in icludedItems[0].basicPackage">
<span>{{ item }}</span>
</li>
</ul>
</div>
<!-- end snippet -->
请注意，这是您提供的代码片段的翻译。
英文:
Try like following snippet. (basicPackage is property from the first object in icludedItems array)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const app = Vue.createApp({
data() {
return {
icludedItems: [
{
freePackage: [
1,2,3,4
],
basicPackage: [
5,6,7,8
],
advancedPackage: [
9,10,11,12
],
premiumPackage: [
13,14,15,16
],
},
],
};
},
})
app.mount('#demo')
<!-- language: lang-html -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<ul>
<li v-for="item in icludedItems[0].basicPackage">
<span>{{ item }}</span>
</li>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论