如何在页面加载时更改 qselect 中的选定项目

Question

我在我的页面上使用带有一些选项的 QSelect 下拉列表 header，如下所示：

<q-select
      filled
      v-model="model"
      use-input
      hide-selected
      fill-input
      input-debounce="0"
      :options="options"
      @filter="filterFn"
      hint="Basic autocomplete"
      style="width: 250px; padding-bottom: 32px"
      emit-value
      map-options
    >
      <template v-slot:no-option>
        <q-item>
          <q-item-section class="text-grey">
            No results
          </q-item-section>
        </q-item>
      </template>
    </q-select>

    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)
      })
    }
  }
})

如何使用某种方法将页面加载时的选定值从 facebook 更改为 google？

我想像下面这样的东西，但无法让它工作：

  mounted: function () {
    this.model = 'g1111111111'
  },

代码笔：https://codepen.io/aquadk/pen/JQbbKw

谢谢

Answer 1

您可以使用 updated 方法，它在数据更改并为该组件创建虚拟 dom 后调用。然后就可以更新模型的值了。

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';
  }
})

Answer 2

mounted 应该可以工作，如果它没有按您预期的方式工作，请尝试安装在内部 nextTick()。

这是您的代码示例：

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

如何在页面加载时更改 qselect 中的选定项目

How can I change selected item in qselect on page load

vue.js

quasar