爲什麼我的vue.js表格不會渲染？

Question

我想渲染使用vue.js表，但我有很多問題。我不知道如何使用v-for來渲染它。我嘗試了幾乎所有的東西。在控制檯中，一切看起來都不錯，但表格清晰。如何正確地做到這一點？

<template> 
     <table class="table table-striped "> 
      <thead> 
      <tr> 
       <th></th> 
       <th>Name</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr v-for="users in usr" :is="users" :usr="users"> 
       <td>{{usr.name}}</td> 
       <td>{{usr.name}}</td> 
      </tr> 
      </tbody> 
     </table> 
</template> 

<script> 
    export default { 
     props: [ 
      'user', 
      'users' 
     ], 
     data: function() { 
      return { 
      usr: [], 
      } 
     }, 
    } 
</script> 

Answer 1

我不知道你用什麼樣的數據，但我們只是假設你有用戶對象的users

<tr v-for="user in users" :key="user.name"> 
    <td>{{user.name}}</td> 
    <td>{{user.name}}</td> 
</tr> 

這將循環數組在以上各users對象user 。 user這裏是一個別名，意思是它可以是任何東西。

<tr v-for="dumbledore in users" :key="dumbledore.name"> 
    <td>{{dumbledore.name}}</td> 
    <td>{{dumbledore.name}}</td> 
</tr> 

將工作