[Vuejs]-How can I change selected item in qselect on page load

by

0👍

✅

You can use updated method, it called after the data changed and virtual dom is created for that component. Then you can update the value of the model.

const stringOptions = [  

{label:'Google', value:'g1111111111'},  {label:'Facebook', value:'f2222222222'}, {label:'Twitter', value:'t3333333'}, {label:'Apple', value:'a44444444'}, {label:'Oracle', value:'o555555555'}
]

new Vue({
  el: '#q-app',
  data () {
    return {
      model: 'f2222222222',
      options: stringOptions
    }
  },

  methods: {
    filterFn (val, update, abort) {
      update(() => {
        const needle = val.toLowerCase()
        this.options = stringOptions.filter(v => v.label.toLowerCase().indexOf(needle) > -1)
      })
    }
  },
  updated(){
      // Update the value of model
      this.model = 'g1111111111';
  }
})

0👍

The mounted should work, if it’s not working the way you expect, try inside-mounted nextTick().

Here is an example with your code:

mounted () {
    this.$nextTick(() => {
       this.model = 'a44444444'
    })
  },

Leave a comment