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

Posted 2023-02-23

【中文标题】如何在 VueJs 中使用三元运算符

【英文标题】：How to use ternary operator in VueJs

【发布时间】：2020-12-19 12:32:18

【问题描述】：

谁能告诉我我在做什么？ 我尝试在 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 时一切正常

【参考方案1】：

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

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

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

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