当父组件向子组件传递版本列表和选定版本并改变时，子组件使用watch监听并更新b-select。然而，由于选择框内容更新不及时，导致选定版本显示为空。通过增加对子组件的强制刷新，确保先更新下拉列表，然后设置默认选中项，成功解决了选定版本不显示的问题。
背景描述：
父组件传给子组件的参数（版本列表、选定的版本）变化时，需要刷新子组件的内容。
场景为：父组件会增加版本列表，并且将新增的版本作为选定的版本。
子组件使用 watch进行监听，子组件使用 b-select 作为下拉框，其中 :options="version_options" 中的列表为父组件传入的版本列表。子组件的代码如下：
|
<b-select :options="version_options" v-model="vctl_version_selected" @input="handleVersionChange"> <template v-slot:first> <b-form-select-option :value="null" disabled>-- Please select one --</b-form-select-option> </template> </b-select> <div class="text-center">当前版本：<strong>{{ this.vctl_version_selected }}</strong></div> export default { name:"versionCtl", props:{ verionList: {}, defaultVersion:String }, watch: { defaultVersion: function (newval) { this.gen_version_options() this.is_editing_version() this.vctl_version_selected = newval }, }, methods: { handleVersionChange: function(value){ alert("versionChange" + value); }, } |
问题现象：
子组件展示的 选定版本为空。
问题分析：
根据输出的alert 的信息，发现 一共产生了两个弹出框：
表示选择框中的 v-model="vctl_version_selected" 值产生了两次变化，但是代码中只在watch中赋值一次。
分析：
推测原因是 选择框组件 找不到选定的列，因此，重新将 选定的值置为 undefined。选择框内的下拉列表的内容更新不及时，因此，需要先更新选择框下拉列表，再进行选定列的赋值。
优化内容：
更改watch中的逻辑，增加对子组件的强制刷新，然后再给 选择框 设定 默认选择列。
|
watch: { defaultVersion: function (newval) { this.gen_version_options() this.is_editing_version() this.$forceUpdate() this.$nextTick(() => { this.vctl_version_selected = newval }) }, |
结果：
解决此问题，能够正确产生新建的版本。
扫一扫
7986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
