创建具有多个属性对象的 v-simple-table 表答案

【问题标题】：Creating a v-simple-table table with multiple properties object创建具有多个属性对象的 v-simple-table 表
【发布时间】：2020-02-05 04:00:26
【问题描述】：

我是 Vue 和 vuetify 的新手，我正在尝试渲染一个包含 2 列的简单表格。对于我的第一列，我没有问题遍历我的 user_info 对象的属性 titles，但我找不到访问我的第二列的第二个属性 data 的方法。


<template>
    <v-container>
        <v-simple-table>
            <template v-slot:default>
                <thead>
                <tr>
                    <th class="text-left">champs</th>
                    <th class="text-left">data</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in user_info.titles">
                    <td> {{ item }} </td>
                    <td>data</td>
                </tr>
                </tbody>
            </template>
        </v-simple-table>
    </v-container>
</template>


<script>
    export default {
        data () {
            return {
                user_info: {
                    titles: [
                        'First name',
                        'Last name',
                        'Account nº',
                        'Email',
                        'Phone',
                        'City',
                        'Postal code',
                        'Region'],
                    data: [
                        'xxxx',
                        'xxxx',
                        'xxxx',
                        'xxxx',
                        'xxxx',
                        'xxxx',
                        'xxxx',
                        'xxxx',
                        'xxxx',
                    ]
                }
            }
        },
    }
</script>
<style scoped>

</style>

由于我的<tr> 标记中不能使用超过1 个v-for，最好的解决方案是什么？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

因此，您可以将v-show 用于第二个属性，并使用v-for 渲染的index。

                <tbody>
                <tr v-for="(item, index) in user_info.titles">
                    <td> {{ item }} </td>
                    <td v-show="user_info.data">{{user_info.data[index]}}</td>
                </tr>
                </tbody>

这样就解决了。

【讨论】：