Laravel vue js conditional rendering inside v-for - laravel

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>

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

Answer 2

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>