我正在Vue.js中构建一个函数,用户可以在数据库中选择一些表格,表格的列名应自动显示在v-list-item组件中。 问题是我无法以良好的方式打印这些列名。
这是我使用的代码:
<v-list-item v-for="(item,index) in this.columns" :key="index">
<v-list-item v-for="ved in item" :key="ved.id">
<v-list-item-content>
<v-list-item-title >{{ved}}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item>
<script>
export default {
data() {
return {
columns:{},
};
},
}
</script>
为了使代码看起来更整洁,我没有包含方法和其他变量。
例如,如果我在数据库中选择了2个表格,其中一个表格只有1列,另一个表格有3列,我从这段代码中得到的结果是:
id //第一个表格的列
name, last_name,email // 第二个表格的列
但我希望第二个表格的列分别打印出来,而不是在同一行用逗号分隔。 我想要的结果是(不包括数字):
这是我从axios请求中得到的结果:
[ [ “ID” ], [ “姓名”, “姓”, “电子邮件” ] ]
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
你可以将这两个数组视为一个列表,其中的项目视为列表项
<v-list v-for="(item, index) in columns" :key="index"> <v-list-item v-for="ved in item" :key="ved.id"> <v-list-item-content> <v-list-item-title>{{ ved }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list>