CODEWITHSUNDEEP
vue.jselement-ui
Mahesh Singh
Mahesh Singh

Reputation: 131

How to trigger blur event of "select" using element-ui and vuejs after selecting an option?

I am using element-ui and vuejs. I have a select element that looks like this

<el-form-item label="City" prop="city">
     <el-select 
            v-model="form.city" 
            multiple 
            filterable
            remote
            auto-complete = "address-level2"
            no-match-text = "No data found"
            :remote-method = "remoteMethod"
            :loading = "loading"
            placeholder="Select City">
          <el-option
            v-for = "(item,index) in cities"
            :key = "index"
            :label = "item.name"
            :value = "item.key"
          ></el-option>
     </el-select>
</el-form-item>

Now I want to trigger the blur event of this select after user selects an option so that the dropdown option collapses.

This is my remote method

remoteMethod: _.throttle(function(query) {
        this.loading = true;
        axios({
            method: 'get',
            url: someUrl
        }).then(response =>{
            if(response.data.status === false){
                this.$notify.error({
                    title: 'Error',
                    message: response.data.message
                });
            }
            else if(response.data.status === true && response.data.data.length != 0){
                this.loading = false;
                this.cities = response.data.data;
            }
        })            
    }, 1500),

Upvotes: 6

Views: 15482

Answers (3)

scorpion
scorpion

Reputation: 719

If your ref="select1"

Html code:

<el-select 
  :value="model" 
  :multiple="field.type === 'tag'"
  @change="update"
  :ref="select1"
>
  <el-option
    <!-- some code here -->
  />
</el-select>

vue code: (use nextTick then blur on ref)

methods: {
  update(newValue) {
    this.$nextTick(() => {
      this.$refs['select1'].blur()
    })
  }
},

Upvotes: 0

Robin Huy
Robin Huy

Reputation: 1100

If you want to hide the dropdown options after user selects an option, just reset data get from remote on event change.

Example:

Call method resetData() when the selected value changes:

<el-form-item label="City" prop="city">
    <el-select 
      @change="resetData"
      v-model="form.city" 
      multiple 
      filterable
      remote
      auto-complete = "address-level2"
      no-match-text = "No data found"
      :remote-method = "remoteMethod"
      :loading = "loading"
      placeholder="Select City">
        <el-option
            v-for = "(item,index) in cities"
            :key = "index"
            :label = "item.name"
            :value = "item.key">
        </el-option>
    </el-select>
</el-form-item>

Reset data get from remote:

resetData() {
    this.cities = [];
},

Upvotes: -2

jacky
jacky

Reputation: 1446

you can set ref property on the component just like ref="select1"

and then you can call focus or blur method by this.$refs

just like: this.$refs.select1.focus()

see http://element.eleme.io/#/en-US/component/select

Upvotes: 4

Related Questions