Display data in table using v-for laravel vuejs

Question

I'm having a trouble why the data did not display in my table, I've been using v-for in tr to display the data info, but it did not work, Is there any wrong with my code? please check this out.It would be great if anybody could help me out, thank you so much in advance!.

But it seems it returns the data

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>

My Script

<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>

My Controller

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

model

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

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

Muhammad Atif Akram · Accepted Answer · 2021-04-11 15:01:55Z

2

First of all use the function call inside mount function. Secondly try the loop with the following syntax.

<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>

And when you get the api response set the users like below.

this.users = response.data.users

edited Apr 11, 2021 at 15:01

answered Apr 11, 2021 at 14:48

Muhammad Atif Akram

1,3351 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Shainnah Jane Over a year ago

thanks for your response, I tried to called the function in mount function and tried your loop above but it didn't display the data at all.

Shainnah Jane Over a year ago

what's the index used for?

Muhammad Atif Akram Over a year ago

index actually refers to the the current iteration value like 0,1,2,3 and so on

Muhammad Atif Akram Over a year ago

Just echo inside blade like this . {{users.length}} {{users}}

Muhammad Atif Akram Over a year ago

hah I was about to mention that in the next comments. . Well, great you figure out.

|

Collectives™ on Stack Overflow

Display data in table using v-for laravel vuejs

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related