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