使用 v-for laravel vuejs 在表中显示数据

Question

我遇到了问题，为什么我的表格中没有显示数据，我一直在使用v-for in tr 显示数据信息，但它不起作用，我的代码有什么问题吗？请检查一下。如果有人可以帮助我，那就太好了，非常感谢您！

但它似乎返回了数据

表格

 <tbody>
     <tr v-for="listuser in users" :key="listuser.id" :value="listuser.id" >
         <td class="pl-0">
              <a href="#" >{{listuser.username}}</a>
                  <span class="text-muted font-weight-bold text-muted d-block">Programmer II</span>
          </td>
     </tr>
  </tbody>

我的脚本

<script>
export default {
    data() {
        return {
            users: [],
        }
    },  
    created() {
        this.getUsers();
    },
    mounted() {
        // this.ini();
    },
    methods: {
        // ini() 
        getUsers() {
            axios.get(BASE_URL + "/users/listUsers").then(response => {
                this.users = response.users;
            });
        }
    },
}
</script>

我的控制器

use App\Models\User;
public function index()
    {
        return response()->json(User::all());
    }

模型

class User extends Authenticatable {
   use HasApiTokens, Notifiable, HasRoles, WithPaginate;
   use ExtendedEloquentTrait;
   protected $guard = 'users';

   protected $fillable = [     
      'username',
      'email',
      'password'
   ];
  }

Answer 1

首先使用mount函数里面的函数调用。其次尝试使用以下语法的循环。

<tr v-for="(item,index) in users" :key="index">
          <td class="pl-0">
          <a href="#" >{{item.username}}</a>
              <span class="text-muted font-weight-bold text-muted  d-block">Programmer II</span>
           </td>
</tr>

当您获得 api 响应时，将用户设置如下。

this.users = response.data.users