使用VueJS Multiselect插件，表单提交成功后如何重置下拉选择？

针对你的需求，有两种简单直接的实现方式：

方法1：直接重置v-model绑定变量 #

组件的选中状态完全由v-model（这里是countryCodeList）控制，单选模式下它对应选中的单个选项对象。在表单提交成功的回调里，直接将其重置为初始状态即可：

// 表单提交成功后的处理函数示例
handleSubmitSuccess() {
  // 重置选中值
  this.countryCodeList = null;
}

注意：如果你的组件设置了:allow-empty="false"，直接设null可能无法清空（组件默认不允许空值）。这种情况可以临时开启空值允许，重置后再恢复：

1. 在组件的data中新增变量：

data() {
  return {
    // ...其他数据
    allowEmpty: false
  }
}

2. 修改组件的:allow-empty绑定：

<multiselect
  ref="vms_country"
  id="countryCode_alpha_3"
  v-model="countryCodeList"
  placeholder="Select Country"
  :options="getList"
  label="country_name"
  track-by="code"
  :close-on-select="true"
  :clear-on-select="false"
  :allow-empty="allowEmpty" <!-- 改为绑定变量 -->
  @select="dispatAction">
</multiselect>

3. 在提交成功回调中处理：

handleSubmitSuccess() {
  this.allowEmpty = true;
  this.countryCodeList = null;
  // 确保DOM更新后再恢复原设置
  this.$nextTick(() => {
    this.allowEmpty = false;
  });
}

方法2：通过组件ref调用内部清除方法 #

Vue Multiselect内置了clearSelection方法，可通过组件的ref直接调用：

handleSubmitSuccess() {
  // 调用组件内置的清除选中状态方法
  this.$refs.vms_country.clearSelection();
}

同样，若设置了:allow-empty="false"，需要先临时开启空值允许，调用方法后再恢复，步骤和方法1一致。

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