Vue.JS 中的数组和嵌套数组答案

【问题标题】：Arrays and nested Arrays in Vue.JSVue.JS 中的数组和嵌套数组
【发布时间】：2019-07-08 16:22:26
【问题描述】：

在一个组件中我有这些数组：

export default {
  data() {

    return {

      userGrades: [
        [course= "Mathematics"], [grade = 18 ],
        [course= "Physics"], [grade = 15 ],
      ],


      userSubscriptions: [
        [option= "Swiming Pool"], [price = 60 ],
        [option= "Fiteness Club"], [price = 30 ],
      ],


      userContact: [(phone = "00000000"), (fax = "11111111")],



    }

我想使用 neted v-for 指令来列出它们。使用单个数组，它很简单，但是当我使用嵌套的 v-for 时，代码会编译，但没有渲染任何内容

【问题讨论】：

你可以添加你的模板，即列表代码？？？
那些数组是什么，里面到底是什么？这不应该编译。
它可以编译，但完全不是你期望的那样；您定义的是{userGrades: [["Mathematics"], [18], ["Physics"], [15]], userSubscriptions: [["Swiming Pool"], [60], ["Fiteness Club"], [30]], userContact: ["00000000", "11111111"]} ，因为所有这些foo = bar 块最终都会返回bar。

标签： javascript html vue.js vue-directives

【解决方案1】：

这里是你应该声明的数组。

userGrades: [
{
    course: 'Mathematics',
    grade: 18
},
{
    course: 'Physics',
    grade: 15
}],
userSubscriptions: [
{
    option: "Swiming Pool",
    price: 60
},
{
    option: "Fiteness Club",
    price: 30
}],
userContact: [
{
    phone: "00000000"
},
{
    fax: "11111111"
}]

您可以像 =>

一样遍历它们

<div v-for="item in userGrades">
{{item.course}}=>{{item.grade}}
</div>

所有其他数组对象也是如此。

【讨论】：

【解决方案2】：

Javascript 没有嵌套关联数组的概念。您必须使用对象表示法：

userGrades: [
  {
      course: 'Mathematics',
      grade: 18
  }
]

【讨论】：