Vue中如何根据特定条件控制下拉选择框的选项显示？

问题原因 #

你之前的代码连续两次调用this.$set为items赋值，第二次赋值会直接覆盖第一次的结果，因此最终只显示了choices[3]对应的rejected选项。要同时展示canceled和rejected，需要将这两个选项封装成一个数组后再赋值。

改进代码（推荐健壮写法） #

使用filter方法根据value筛选目标选项，避免依赖数组下标（后续选项顺序变化也不会出错）：

// 保留原始基础配置逻辑
this.$set(this.inputs.visit_status, "item_text", "display_name")
this.$set(this.inputs.visit_status, "item_value", "value")
this.$set(this.visitStatusOriginal, "visit_status", item.visit_status)
if (item.visit_status) {
  this.$set(this.inputs.visit_status, "value", item.visit_status)
  this.$set(this.inputs.visit_status, "tmp_value", {
    "display_name": item.visit_status.toUpperCase(),
    "value": item.visit_status
  })
}

// 动态筛选下拉选项
if (item.visit_status === 'approved') {
  // 筛选出value为canceled和rejected的选项
  const filteredChoices = this.inputs.visit_status.choices.filter(choice => 
    choice.value === 'canceled' || choice.value === 'rejected'
  );
  this.$set(this.inputs.visit_status, "items", filteredChoices);
} else {
  // 非approved状态下显示所有选项
  this.$set(this.inputs.visit_status, "items", this.inputs.visit_status.choices);
}

备选写法（依赖固定下标） #

如果确定choices数组的下标不会变化，也可以直接选取对应元素组成数组：

if (item.visit_status === 'approved') {
  this.$set(this.inputs.visit_status, "items", [
    this.inputs.visit_status.choices[2],
    this.inputs.visit_status.choices[3]
  ]);
} else {
  this.$set(this.inputs.visit_status, "items", this.inputs.visit_status.choices);
}

内容的提问来源于stack exchange，提问作者Gavin Teo Juen