使用v-for在vuetify中展示物件的值的嘗試

Question

我正在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 // 第二個表格的欄位

但我希望第二個表格的欄位分別列印出來，而不是在同一行用逗號分隔。 我想要的結果是（不含數字）：

1. id //第一列
2. name //第二列
3. 姓氏
4. 電子郵件

這是我從axios請求中得到的結果：

[ [ “ID” ], [ “姓名”， “姓”， “電子郵件” ] ]

Answer 1

你可以將這兩個陣列視為一個列表，其中的項目視為列表項目

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