如何在 v-autocomplete(vuejs & vuetify) 上使第二个值可选答案

【问题标题】：How to make the second value optional on v-autocomplete(vuejs & vuetify)如何在 v-autocomplete(vuejs & vuetify) 上使第二个值可选
【发布时间】：2020-06-23 21:16:39
【问题描述】：

我的模板上有一个 v-autocomplete 组件，我想通过 item-text 显示数据。第一个值${item.name} 将始终呈现，但第二个值${item.faculty.name} 来自嵌套关系，我想让它成为可选的（如果存在则显示，如果它为空则不显示任何内容）。怎么实现呢。

        <v-autocomplete
              v-model="form.classroom"
              :items="classrooms"
              :item-text="item => `${item.name} - ${item.faculty.name}`"
              item-value="id"
              :label="$t('GENERAL.ALL.CLASS_ROOM')"
              hide-selected
              clearable
              prepend-icon="mdi-chair-school"
              :error-messages="serverValidation.getMessage('classroom')"
           ></v-autocomplete>

第一个值显示没有问题。

【问题讨论】：

使用computed 值，如果你把这个逻辑放到你的js代码中会更容易处理。

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

【解决方案1】：

试试三元运算符condition?option1:option2：

  :item-text="item => item.faculty?`${item.name} - ${item.faculty.name}`:item.name"

或

:item-text="item => `${item.name} ${item.faculty?' - '+item.faculty.name:''}`"

【讨论】：

像冠军先生一样工作。非常感谢