页面加载时如何修改Quasar QSelect下拉组件的选中值？

• QSelect搭配use-input、fill-input属性时，内部的输入框展示文本和v-model绑定的选中值并非双向强同步：v-model仅存储选中的选项value，输入框的显示内容仅在用户输入、手动点选选项时由组件主动更新，外部直接修改model值，组件不会自动遍历全量选项匹配对应label填充到输入框，最终表现为选中状态未同步、输入框值错乱。
• 同步写在mounted钩子里的修改逻辑执行时机早于QSelect的内部初始化流程，此时组件还未完成初始model和options的映射关系建立，直接修改model会打断这个流程，直接导致状态失效。

• 无特殊逻辑要求时，直接修改data中model的初始值为目标值即可，比如将model: 'f2222222222'调整为model: 'g1111111111'，组件初始化阶段会自动完成选项匹配、输入框值填充，是最稳定的写法。
• 若确实需要在页面加载完成后通过逻辑动态修改选中值，按以下步骤操作：
  1. 给QSelect组件添加ref标识，比如ref="autocompleteSelect"
  2. 将修改model的逻辑放在$nextTick回调中，等组件完成初始化后再执行，同时同步更新组件的输入框显示值：

     mounted() {
       this.$nextTick(() => {
         const targetValue = 'g1111111111'
         // 更新选中的value值
         this.model = targetValue
         // 从全量常量选项中匹配对应label，同步到组件输入层
         const targetOption = stringOptions.find(item => item.value === targetValue)
         this.$refs.autocompleteSelect.setInputValue(targetOption.label)
       })
     }
     

• 不要在生命周期的同步执行阶段直接修改model值，必须通过$nextTick等组件内部初始化完成后再操作，否则会打断组件的选项映射流程。
• 现有代码中filterFn直接将过滤结果赋值给this.options的逻辑本身没有问题，但不要在组件初始化阶段手动修改this.options的内容，否则会进一步加剧选项匹配的混乱。

内容的提问来源于stack exchange，提问作者CamelCase