Vue JS 无法正确显示数据表（v-for）

Question

我正在尝试显示来自 Firebase Firestore 的数据表，我已经设法将所有数据放入一个数组中，但是当我尝试显示该内容时，显示的是整个数组而不是单品，看图：

这是我的代码：

 <template>
  <v-simple-table>
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">
            Name
          </th>
          <th class="text-left">
            Calories
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
           v-for="(item, index) in result"
          v-bind:key="index"
          
        >
          <td>{{ result }}</td>
          
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<script>
import firebase from 'firebase' 
import {db} from '../service/firebase'
  export default {
    data () {         
      return {
        userName: null,
        result: [],
        name: null,
        email: null,       
        userMail: null,
        telefone: null,
        userPhone: null,        
        userAccept: null,
      }
    },    
     async created() {    
      var userData = []
      await db.collection("users").get().then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
          console.log(`${doc.id} => ${doc.data()}`);
          userData.push(doc.data())          
    });    
});   
      this.result = userData.map(a => a.name)      
       console.log(result)          
    }    
  }      
    
</script>

如何显示数组的单个项目表而不是数组表？ 提前谢谢！

Answer 1

您正在使用{{result}} 打印整个内容，正确的语法如下：

<tr  v-for="(item, index) in result" v-bind:key="index" >
  <td v-for="(record,i) in item" :key="i">{{ record }}</td>
</tr>