如何使用v-for处理嵌套数组

Question

假设我有一个需要填充项目的下拉列表，但它们是基于之前选择的下拉列表动态生成的……所以..。like...using交通工具的例子...假设我有这样的车辆数据..vehicleDetails.json

{
    "1": {
        "id": 1,
        "make": "Subaru",
    "models": [{
            "id": 1,
            "name": "Forrester",
            "years": [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
            "series": [{
                    "id": 1,
                    "name": "SH",
                    "years": [2009, 2010, 2011, 2012]
                },
                {
                    "id": 2,
                    "name": "SJ",
                    "years": [2012, 2013, 2014, 2015, 2016, 2017, 2018]
                },
                {
                    "id": 3,
                    "name": "SK",
                    "years": [2018, 2019, 2020]
                }
            ]
        },
        {
            "id": 2,
            "name": "Impreza",
            "years": [2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
            "series": [{
                    "id": 1,
                    "name": "GJ",
                    "years": [2011, 2012, 2013, 2014, 2015, 2016]
                },
                {
                    "id": 2,
                    "name": "GT",
                    "years": [2017, 2018, 2019, 2020]
                }
            ]
        }
    ]
},
"2": {
    "id": 1,
    "make": "Toyota",
    "models": [{
            "id": 1,
            "name": "Camry",
            "years": [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
            "series": [{
                    "id": 1,
                    "name": "XV40",
                    "years": [2009, 2010, 2011, 2012]
                },
                {
                    "id": 2,
                    "name": "XV70",
                    "years": [2017, 2018, 2019, 2020]
                }
            ]
        },
        {
            "id": 2,
            "name": "4Runner",
            "years": [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
            "series": [{
                    "id": 1,
                    "name": "N210",
                    "years": [2009]
                },
                {
                    "id": 2,
                    "name": "GT",
                    "years": [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
                }
            ]
        }
    ]
}

}

我有三个内联下拉菜单，分别显示了品牌、型号和系列。我需要它只显示与制造相关的模型，以及与模型相关的系列。但这些都是嵌套数组，并且v-for一次只能处理一个数组。他们的身份看起来并不相关...就像..。4runner的id与Imprezza相同。在这里苦苦挣扎。帮助?

Answer 1

您需要多个div和多个v-for来处理多个级别的数组。

或者，您可以使用一个缩减程序：https://www.robinwieruch.de/javascript-reducer/

或者一个过滤器：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

为了提取出适当的“序列”键，你只需迭代单级数组即可。

使用vueJs中的方法将是格式化数据的理想方式，因此您的模板更加优雅。

Answer 2

下面是一个使用数据作为carData的工作组件

<template>
  <div>
    <select v-model="make">
      <option v-for="m in makes" :key="m.id" :value="m">{{ m.make }}</option>
    </select>
    <select v-model="model">
      <option v-for="m in models" :key="m.id" :value="m">{{ m.name }}</option>
    </select>
    <select v-model="year">
      <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
    </select>
  </div>
</template>

<script>
const CAR_DATA = {
  '1': {
    id: 1,
    make: 'Subaru',
    models: [
      {
        id: 1,
        name: 'Forrester',
        years: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
        series: [
          {
            id: 1,
            name: 'SH',
            years: [2009, 2010, 2011, 2012],
          },
          {
            id: 2,
            name: 'SJ',
            years: [2012, 2013, 2014, 2015, 2016, 2017, 2018],
          },
          {
            id: 3,
            name: 'SK',
            years: [2018, 2019, 2020],
          },
        ],
      },
      {
        id: 2,
        name: 'Impreza',
        years: [2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
        series: [
          {
            id: 1,
            name: 'GJ',
            years: [2011, 2012, 2013, 2014, 2015, 2016],
          },
          {
            id: 2,
            name: 'GT',
            years: [2017, 2018, 2019, 2020],
          },
        ],
      },
    ],
  },
  '2': {
    id: 2,
    make: 'Toyota',
    models: [
      {
        id: 1,
        name: 'Camry',
        years: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
        series: [
          {
            id: 1,
            name: 'XV40',
            years: [2009, 2010, 2011, 2012],
          },
          {
            id: 2,
            name: 'XV70',
            years: [2017, 2018, 2019, 2020],
          },
        ],
      },
      {
        id: 2,
        name: '4Runner',
        years: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
        series: [
          {
            id: 1,
            name: 'N210',
            years: [2009],
          },
          {
            id: 2,
            name: 'GT',
            years: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
          },
        ],
      },
    ],
  },
};

export default {
  data() {
    return {
      make: null,
      model: null,
      year: null,
      carData: CAR_DATA,
    };
  },
  computed: {
    makes() {
      return Object.values(this.carData);
    },
    models() {
      return this.make ? this.make.models : [];
    },
    years() {
      return this.model ? this.model.years : [];
    },
  },
};
</script>

这个实现的好处是，您实际上不必遍历对象。诀窍完全在于为每个option选择正确的value对象。