QSelect clears the selection on click with filter



  • Hello, I’m new here, and I’m facing a problem for days and I don’t know how to solve it.
    I use a multiple QSelect component that has options as return from an API using axes.
    When I use QSelect without a filter it works perfectly, but when using the filter event when I click on QSelect to open the options, what was already selected in the model is “excluded” from the selection, I don’t know how to proceed with this situation.
    Follow the code snippets;

    data () {
        return {
          vehicleTypesOptions: [],      
          state: false
        }
    ,  
      created() {
        console.log()
        this.getNewAll(
          'vehicleTypes', 
          null,
          null,
          null,        
          null,
          null,        
          'id,name',
        ).then((response) => {
          this.state = true
          this.vehicleTypesOptions = response.data.data.data
        })
      },
    methods: {    
        filterFn(val, update, abort) {  
            if (val === '') {     
            update(() => {
                  this.vehicleTypesOptions = this.vehicleTypesOptionsDefault                           
              })
              return 
            } else {
                console.log('test')
            } 
        },
      },
    
    <template>
    <div>
    <q-select
            filled
            v-model="vehicle_types"
            use-input
            input-debounce="0"
            label="Type"
            :options="vehicleTypesOptions"
            @filter="filterFn"
            multiple
            option-value="id"
            option-label="name"
            
          >
    </div> 
    </template>
    


  • @piovezan-f
    this.vehicleTypesOptions = response.data.data.data should be this.vehicleTypesOptionsDefault = response.data.data.data
    and also
    vehicleTypesOptionsDefault should be in data
    like

    data () {
        return {
          vehicleTypesOptions: [],
          vehicleTypesOptionsDefault: [],      
          state: false
        }
    

    Please post a pen next time it is easier to trouble shoot like that.



  • sorry for the confusion in the code, my current code is exactly the same as you passed it, I’m sending the code example again

    data () {
        return {
          vehicleTypesOptions: [],
          vehicleTypesOptionsDefault: []      
          state: false
        }
    ,  
      created() {
        console.log()
        this.getNewAll(
          'vehicleTypes', 
          null,
          null,
          null,        
          null,
          null,        
          'id,name',
        ).then((response) => {
          this.state = true
          this.vehicleTypesOptionsDefault = response.data.data.data
        })
      },
    methods: {    
        filterFn(val, update, abort) {  
            if (val === '') {     
            update(() => {
                  this.vehicleTypesOptions = this.vehicleTypesOptionsDefault                           
              })
              return 
            } else {
                console.log('test')
            } 
        },
      },
    
    <template>
    <div>
    <q-select
            filled
            v-model="vehicle_types"
            use-input
            input-debounce="0"
            label="Type"
            :options="vehicleTypesOptions"
            @filter="filterFn"
            multiple
            option-value="id"
            option-label="name"
            
          >
    </div> 
    </template>
    

Log in to reply