Vue下拉组件点击重置按钮未恢复占位符的响应式问题排查

核心问题 #

你代码里的错误主要有两个：

1. 调用子组件方法的方式完全错误，没有作用到实际渲染的组件实例上
2. 下拉组件没有同步父组件传入的selected属性的后续变化

修复步骤 #

1. 修正App.vue中子组件方法的调用逻辑 #

你直接import的dropdown是组件的配置原型，不是页面上实际渲染的组件实例，调用dropdown.methods.clearOption()根本不会修改页面上组件的内部状态。
首先给<dropdown>标签添加ref属性，用来获取真实的组件实例：

<dropdown 
  ref="myDropdown"
  v-if="foo.bar" 
  class="my-dropdown"
  :options="myOptions"
  :selected="foo.bar.name"
  @update-option="onSelected"
  :placeholder="'Select a MyOption'"
>
</dropdown>

然后修改onReset方法里的调用代码：

onReset() {
  console.log("Resetting...");
  this.foo = {};
  this.foo['bar'] = {};
  this.foo['bar']['name'] = '';
  // 通过ref调用实际渲染的组件实例的方法
  this.$refs.myDropdown?.clearOption();
}

2. 给Dropdown.vue添加prop监听 #

你当前只在mounted阶段给内部的selectedOption赋值了一次，后续父组件修改selected属性时子组件不会同步更新，添加watch监听即可：

export default {
  // 原有props、data等配置保持不变
  watch: {
    selected(newVal) {
      this.selectedOption = newVal;
    }
  },
  // 原有methods等配置保持不变
}

可选优化 #

你可以把isPlaceholder方法改成计算属性，避免每次页面渲染都重复执行逻辑：

computed: {
  isPlaceholder() {
    return (this.selectedOption === undefined || this.selectedOption === null || this.selectedOption === '');
  }
}

模板里直接用v-if="isPlaceholder"即可，不需要加括号。

另外你的selectedprop定义的类型是String，但clearOption里给selectedOption设为null会触发类型警告，可以把prop定义改成：

selected: {
  type: [String, null],
  default: ''
}

或者直接把clearOption里的赋值改成this.selectedOption = ''更匹配类型定义。

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