使用v-for在vuetify中展示对象的值的尝试
<p>我正在Vue.js中构建一个函数，用户可以在数据库中选择一些表格，表格的列名应自动显示在v-list-item组件中。
问题是我无法以良好的方式打印这些列名。</p>
<p>这是我使用的代码：</p>
<p>
<pre class="brush:js;toolbar:false;"><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></pre>
</p>
<p>为了使代码看起来更整洁，我没有包含方法和其他变量。</p>
<p>例如，如果我在数据库中选择了2个表格，其中一个表格只有1列，另一个表格有3列，我从这段代码中得到的结果是：</p>
<blockquote>
<p>id //第一个表格的列</p>
</blockquote>
<blockquote>
<p>name, last_name,email // 第二个表格的列</p>
</blockquote>
<p>但我希望第二个表格的列分别打印出来，而不是在同一行用逗号分隔。
我想要的结果是（不包括数字）：</p>
<ol>
<li>id //第一列</li>
<li>name //第二列</li>
<li>姓氏</li>
<li>电子邮件</li>
</ol>
<p>这是我从axios请求中得到的结果：</p>
<blockquote>
<p>[
[
“ID”
],
[
“姓名”，
“姓”，
“电子邮件”
]
]</p>
</blockquote></p>
1
824
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
你可以将这两个数组视为一个列表，其中的项目视为列表项
<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>