时间戳

首页 > 解决方案 > v-autocomplete 如何检测是否没有结果并添加自定义操作

javascript - v-autocomplete 如何检测是否没有结果并添加自定义操作

问题描述

我有一个 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>

标签： javascriptvue.jsvuetify.js

解决方案

尝试v-if在v-row. 我假设这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>

推荐阅读