Question

我是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>

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

Answer 1

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

                <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>

解决了。

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

1 个答案: