Question

假设我有一个下拉列表，需要在其中填充项目，但是它们是根据之前选择的下拉列表动态生成的...所以...就像...使用车辆示例...让说我有这样的车辆数据.. 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一次只能处理一个数组。而且ID似乎彼此无关...就像.. 4runner的ID与Imprezza一样。在这里奋斗。帮助吗？

Answer 1

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

或者您可以使用减速器：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>

此实现的好处是，您实际上不必遍历该对象。诀窍完全是为每个value选择合适的option对象。

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

2 个答案: