如何在 VueJs 中使用三元运算符答案

【问题标题】：How to use ternary operator in VueJs如何在 VueJs 中使用三元运算符
【发布时间】：2024-04-24 04:05:02
【问题描述】：

谁能告诉我我在做什么？我尝试在 v-slot 范围内使用三元运算符

这是我的代码

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

如果有人知道这个问题的解决方案，我将非常感激

【问题讨论】：

你的三元没有问题，你得到了什么错误v-slot="activator"和v-slot="default"都有效？如果模型未预定义为数组，您可能需要在某处使用v-if="category.children"
我没有发现任何问题。除非你告诉我们你想要达到什么目标？
我只是猜测，你得到property of undefined 错误？
在这种情况下，我使用三元运算符，页面不是渲染但是当我使用简单的 v-if v-else 时一切正常

标签： vue.js vuejs2 vue-component vuex vuetify.js

【解决方案1】：

为了使用动态槽名，你需要使用in the docs指定的语法：

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

例如，您可以像这样添加计算属性：

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

【讨论】：