v-autocomplete如何检测如果没有结果并添加自定义动作

Question

我有一个搜索用户列表的Vuetify。如果没有结果，我想显示第二个按钮，允许您创建一个新用户:

<v-autocomplete
v-model="event.user"
:items="usersData"
label="Seach speaker list"
:search-input.sync="searchUser"
return-object
item-value="id"
item-text="name"
>
</v-autocomplete>

这是要显示的按钮。如果没有结果，我如何有条件地允许这一点?

<v-row>
<v-col cols="8">
<v-row>
<v-subheader>
Can’t find who you’re looking for?
</v-subheader>
</v-row>
<v-btn>
<v-icon>
mdi-plus
</v-icon>
Add new speaker
</v-btn>
</v-col>
</v-row>

Answer 1

尝试在v-row中添加v-if指令。我假设usersData是一个数组:

<v-row v-if="usersData.length == 0">
<v-col cols="8">
<v-row>
<v-subheader>
Can’t find who you’re looking for?
</v-subheader>
</v-row>
<v-btn>
<v-icon>
mdi-plus
</v-icon>
Add new speaker
</v-btn>
</v-col>
</v-row>