How to use ternary operator in VueJs

Question

Can some one tell me what im do wong Im try to use ternary operator in v-slot scope

Here is my code

<template :v-slot="category.children.length ? `activator` : `default`">
    <v-list-item-avatar>
       <v-img :src="`/uploads/image/category/` + category.image"></v-img>
    </v-list-item-avatar>
    <v-list-item-content>
       <v-list-item-title v-text="category.name"></v-list-item-title>
    </v-list-item-content>
</template>

If anyone knows a solution to this problem, I will be very grateful

nothing wrong with your ternary , what errors are you getting does both v-slot="activator" and v-slot="default" work? you may need a v-if="category.children" somewhere if the model is not predefined as an array — Lawrence Cherone
– Lawrence Cherone, Commented Aug 31, 2020 at 11:32
I don't see anything wrong here. Unless you tell us what you're trying to achieve? — Jonathan Akwetey Okine
– Jonathan Akwetey Okine, Commented Aug 31, 2020 at 11:33
In this situation whem im using ternary operator the page not a render But when im using simple v-if v-else everything ok — Евгений Тимченко
– Евгений Тимченко, Commented Aug 31, 2020 at 11:57

tony19 · Accepted Answer · 2022-07-15 21:58:35Z

3

In order to use dynamic slot names, you need to use this syntax as specified in the docs:

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

For example you can add a computed property like so:

computed: {
  dynamicSlotName() {
    return this.category.children.length ? "activator" : "default";
  }
}

edited Jul 15, 2022 at 21:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 31, 2020 at 11:53

Gaetan C.

1,91416 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

How to use ternary operator in VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related