如何在 Vue.js 中的数组内的对象内的数组中显示表中的数据？

Question

我有一个名为 cars 的数组，它有 2 个对象。在那个对象中，我有另一个名为brands 的数组。在里面我有另一个称为模型的数组。

我想使用 Vue.js 在表格中显示模型数组中的数据这是我目前得到的。

我是 Vue.js 和编程的新手，所以请帮我解决这个问题。 TIA

<template>
    <div>
        <h1>Vehicle Search Form</h1>
        <form>
            <div class="form-check form-group">
                <label for="car">Choose a Car Type</label>
                <select v-model="selectedCar">
                    <option v-for="car in cars" :value="car" :key="car.carId">{{car.car}}</option>
                </select>
                <label for="brand" v-if="selectedCar != -1">Choose a Brand</label>
                <select v-model="selectedBrand" v-if="selectedCar != -1">
                    <option v-for="brand in selectedCar.brands" :key="brand.id">{{brand.brand}}</option>
                </select>

                <table style="width:100%" v-if="selectedCar != -1 && selectedBrand != -1">
                    <tr>
                        <th>Models</th>
                    </tr>
                    <tr v-for="model in selectedCar.brands.models" :key="model">
                        <td></td>
                        <td> {{model}}</td>
                    </tr>
                </table>

            </div>
        </form>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                cars: [
                    {
                        carId: 1,
                        car: 'SUV',
                        brands: [
                            {
                                id: 1,
                                brand: 'Ford',
                                models: ['Ford EcoSport', 'Ford Expedition', 'Ford Edge', 'Ford Escape']
                            },
                            {id: 2, brand: 'GMC', models: ['GMC Terrain', 'GMC Suburban']},
                            {id: 3, brand: 'Dodge', models: ['Journey', 'Grand Caravan']},
                            {id: 4, brand: 'Mercedes-Benz', models: ['G-Class']},
                            {id: 5, brand: 'Audi', models: ['Audi Q3', 'Audi Q5', 'Audi Q5', 'Audi Q7']}
                        ]
                    },
                    {
                        carId: 2,
                        car: 'Sedan',
                        brands: [
                            {brand: 'Dodge', models: ['Charger', 'Challenger', 'Durango']},
                            {brand: 'Mercedes-Benz', models: ['C-Class', 'AMG', 'E-Class', 'S-Class']},
                            {brand: 'Audi', models: ['Audi A4', 'Audi A8', 'Audi RS 3']}
                        ]
                    }
                ],
                selectedCar: -1,
                selectedBrand: -1,
                // selectedModel: -1
            }
        },
    };

</script>

<style scoped>
    select {
        border: 1px solid rgb(27, 189, 154);
    }
</style>

Answer 1

据我了解，您需要获取选定的品牌型号并在下一次选择中显示它们。 所以你可以使用计算属性和选项的 :value 属性来做到这一点：

    <select v-model="selectedBrand" v-if="selectedCar != -1">
        <option
            v-for="(brand, index) in selectedCar.brands"
            :key="brand.id"
            :value="brand.id"
        >
            {{brand.brand}}
        </option>
    </select>

此模板会将所选品牌的 id 插入到 selectedBrand 属性中，然后您可以创建表示所选品牌对象的计算属性：

    computed: {
        selectedBrandObject() {
            let selectedBrand = {};
            for(let brand of this.selectedCar.brands) {
                if(parseInt(brand.id, 10) === parseInt(this.selectedBrand, 10)) {
                    selectedBrand = brand;
                    break;
                }
            }

            return selectedBrand;
        }
    }

您可以在模板中访问所选品牌，因此：

    <tr v-for="model in selectedBrandObject.models" :key="model">
        <td></td>
        <td> {{model}}</td>
    </tr>

因此将只有选定的品牌型号。如果您需要更多关于计算属性的信息，可以查看here

Answer 2

您确实混淆了属性名称。我重命名了你的变量并解决了这个问题。 您忘记将每个品牌的值绑定到选择选项:value="brand"。

<select v-model="selectedBrand" v-if="selectedCar != -1">
  <option v-for="brand in selectedCar.brands" :key="brand.id" :value="brand">{{brand.brand}}</option>
</select>

这是工作更新的代码：

var vm = new Vue({
  el: "#container",
         data() {
            return {
                cars: [
                    {
                        carId: 1,
                        car: 'SUV',
                        brands: [
                            {
                                id: 1,
                                brand: 'Ford',
                                models: ['Ford EcoSport', 'Ford Expedition', 'Ford Edge', 'Ford Escape']
                            },
                            {id: 2, brand: 'GMC', models: ['GMC Terrain', 'GMC Suburban']},
                            {id: 3, brand: 'Dodge', models: ['Journey', 'Grand Caravan']},
                            {id: 4, brand: 'Mercedes-Benz', models: ['G-Class']},
                            {id: 5, brand: 'Audi', models: ['Audi Q3', 'Audi Q5', 'Audi Q5', 'Audi Q7']}
                        ]
                    },
                    {
                        carId: 2,
                        car: 'Sedan',
                        brands: [
                            {brand: 'Dodge', models: ['Charger', 'Challenger', 'Durango']},
                            {brand: 'Mercedes-Benz', models: ['C-Class', 'AMG', 'E-Class', 'S-Class']},
                            {brand: 'Audi', models: ['Audi A4', 'Audi A8', 'Audi RS 3']}
                        ]
                    }
                ],
                selectedDesign: null,
                selectedBrand: null,
            }
        },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='container'>
    <div>
        <h1>Vehicle Search Form</h1>
        <form>
            <div class="form-check form-group">
                <label for="car">Choose a Car Type</label>
                <select v-model="selectedDesign">
                    <option v-for="car in cars" :value="car" :key="car.carId">{{car.car}}</option>
                </select>
                <label for="brand" v-if="selectedDesign">Choose a Brand</label>
                <select v-model="selectedBrand" v-if="selectedDesign">
                    <option v-for="brand in selectedDesign.brands" :key="brand.id" :value="brand">{{brand.brand}}</option>
                </select>
                <table style="width:100%" v-if="selectedBrand">
                    <tr>
                        <th>Models</th>
                    </tr>

                    <tr v-for="model in selectedBrand.models" :key="model">
                        <td></td>
                        <td> {{model}}</td>
                    </tr>
                </table>
            </div>
        </form>
    </div>

您始终可以使用null 初始化数据，并且当您使用v-if 条件渲染时，null 被视为错误。 在MDN

上检查 JavaScript Truthy 和 Falsy