Quasar Select: 可输入选项option，输入的option可清除

实现效果

UI组件依然是使用Quasar Framework。

先来看一下效果：

实现Select: 可输入选项option，输入的option可清除

在官网的示例找到 Using menu and filtering，在此基础上进行修改，结合Customizing menu options自定义选项，实现选项的清除按钮。

Select: Filtering and adding to menu - Quasar Playground 在此代码基础上进行修改:
代码如下：

template:

    <q-select
      outlined
      v-model="model"
      use-input 
      @new-value="createValue"
      :options="filterOptions"
      @filter="filterFn"
      clearable
      style="width: 350px"
    >
      
        <template v-slot:option="scope">
          <q-item
            v-bind="scope.itemProps"
            v-on="scope.itemEvents"
          >
            <q-item-section>
              <q-item-label>{{ scope.opt }}</q-item-label>
            </q-item-section>
            <q-item-section avatar v-if="options.indexOf(scope.opt) === -1" @click="deleOption(scope.opt)">
              <q-icon name="clear"></q-icon>
            </q-item-section>
          </q-item>
        </template>
    </q-select>

data中增加：

options:['Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'], // 初始值

methods中增加:

    deleOption(opt){
      if(opt === this.model){
      this.model = null;        
      }
      const pos = stringOptions.indexOf(opt);
      stringOptions = stringOptions.splice(pos, 1);
    }

完整代码

点击查看：CodePen Home Quasar Select: 可输入选项option，输入的option可清除

文档

Quasar Framework
Using menu and filtering
Customizing menu options