为什么我的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> 

将工作