[Vuejs]-How do I chain multiple conditions in a Vue JS v-if conditonal?

by

1👍

✅

You have an error – an unclosed quote, the fix is:

v-if="user.country === 'United States' || user.country === 'Japan'"

But the Vue3 docs say:

It’s not recommended to use v-if and v-for on the same element due to implicit precedence. Refer to style guide for details.

so you should probably do:

<template v-for="user in users">
<div class="person" v-if="user.country === 'United States' || user.country === 'Japan'">
        <span>{{ user.first_name }}, {{ user.last_name }}</span>
        <a :href="'mailto:' + user.email | lowercase">{{ user.email }}</a>
        <span>{{ user.country }}</span>
      </div>
</template>

But my preferred way is to use a computed:

<script setup>
...
const filteredUsers = computed(() => users.filter(user => ['United States', 'Japan'].includes(user.country)));
...
</script>
<template>
<div class="person" v-for="user in filteredUsers">
        <span>{{ user.first_name }}, {{ user.last_name }}</span>
        <a :href="'mailto:' + user.email | lowercase">{{ user.email }}</a>
        <span>{{ user.country }}</span>
      </div>
</template
👤Alexander Nenashev

Leave a comment