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

Question

我的table为什么没有显示数据，我一直在用v-for in tr显示数据信息，但是没有用，请问有什么问题吗？我的代码有问题吗？请检查此 out.It 如果有人能帮助我，那就太好了，在此先感谢您！

不过好像是returns数据

table

 <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

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

Display data in table using v-for laravel vuejs

laravel

vue.js

v-for