Laravel vue js conditional rendering inside v-for

Question

I'm having a trouble on how can I implement conditional rendering inside v-for in laravel vue js based on the documentation of vue js v-for and v-if together is not recommended. It would be great if anybody could help me out, thank you so much in advance!.

This is what flow looks like I know the format is incorrect

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>
       <v-if =user.gender="Male" >
       <span>Male - {{ user.gender }}</span>    
       <v-else>
        <span>FeMale - {{ user.gender }}</span>               
    </td>
</tr>

script

<script>
export default {
    data() {
        return {
            users: [],
        }
    },  
    created() {
        this.getUsers();
    },
    mounted() {

    },
    methods: {
        getUsers() {
            axios.get(BASE_URL + "/users/listUsers").then(response => {
                this.users = response.data;
            });
        },
    },
}
</script>

Bulent · Accepted Answer · 2021-04-11 17:38:56Z

1

Your v-if syntax is completely incorrect. Let's fix it first.

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>
       <span v-if="user.gender=='Male'">Male - {{ user.gender }}</span>    
       <span v-else>FeMale - {{ user.gender }}</span>               
    </td>
</tr>

If <span> isn't necessary I would use this:

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td v-if="user.gender=='Male'">Male - {{ user.gender }}</td>
    <td v-else>FeMale - {{ user.gender }</td>         
</tr>

Actually, there is a better way:

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>{{ user.gender=="Male" ? "Male" : "FeMale" }} - {{ user.gender }}</td>         
</tr>

v-for and v-if can't be used in the same tag. This is not the case in your code. When you need v-for and v-if together, you should use a computed property, and return the array/object that is filtered based on the condition, then inject it into v-for.

Let's say you need something like this:

<tr v-for="user in users" :key="user.id" v-if="user.id > 10">...</tr>

In this case, we use computed property:

computed: {
  filteredUsers() {
    return this.users.filter(user => user.id > 10);
  }
}

and in the template:

<tr v-for="user in filteredUsers" :key="user.id">...</tr>

answered Apr 11, 2021 at 17:38

Bulent

3,4411 gold badge19 silver badges25 bronze badges

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

1 Comment

Shainnah Jane Over a year ago

Thanks this is very detail I understand now thank you!

tony19 · Accepted Answer · 2022-07-16 05:03:41Z

0

I think there is a misunderstanding. You should not use v-if and v-for on the same element the way you used it is fine. You can see an example here. If you don't want to have v-if at all since you aren't rendering completely different elements you could use ternary operation in mustaches:

<tr v-for="user in users" :key="user.id" :value="user.id"> 
    <td>
       <span>{{ user.gender === 'Male' ? `Male - ${user.gender}` : `Female - ${user.gender}` }}</span>                   
    </td>
</tr>

edited Jul 16, 2022 at 5:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 11, 2021 at 17:35

Milad Esrafilian

1833 silver badges14 bronze badges

Collectives™ on Stack Overflow

Laravel vue js conditional rendering inside v-for

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related