已解决：Vue.js v-select联动下拉v-if与计算属性实现失效问题

两类失效方案的根因 #

• 直接在第二个下拉框加v-if="regions.pays == paysChoose"失效：regions是存储所有地区的数组，数组本身不存在pays属性，判断结果恒为false，组件直接被卸载不渲染。
• 计算属性过滤后下拉无选项：国家选择框配置了label="title"但未指定值绑定字段，v-model绑定的paysChoose默认存储整个国家选项对象，过滤逻辑拿地区关联的国家标量值和整个对象做相等判断，永远匹配不到符合条件的地区，因此返回空数组。
• 附加样式问题：原有代码中width: calc(100%-50px)写法不符合CSS规范，calc()内运算符两侧必须加空格，正确写法为calc(100% - 50px)，否则宽度样式不生效。

可直接运行的实现代码 #

1. 数据源定义 #

统一国家和地区的关联标识，避免匹配逻辑出错：

data() {
  return {
    // 国家选项列表
    pays: [
      { title: '法国', code: 'FR' },
      { title: '英国', code: 'UK' },
      { title: '西班牙', code: 'ES' }
    ],
    paysChoose: null,
    // 地区选项列表，通过pays字段关联所属国家
    regions: [
      { titre: '阿尔萨斯', pays: 'FR' },
      { titre: '洛林', pays: 'FR' },
      { titre: '大伦敦', pays: 'UK' },
      { titre: '安达卢西亚', pays: 'ES' },
      { titre: '加泰罗尼亚', pays: 'ES' }
    ],
    regionChoose: null
  }
}

2. 国家选择框模板 #

新增item-value配置指定v-model绑定的匹配字段，切换国家时自动清空已选地区，避免无效值残留：

<v-select 
  style="grid-column: 1; width: 100%" 
  :options="pays" 
  label="title"
  item-value="code"
  v-model="paysChoose"
  @update:model-value="() => regionChoose = null"
></v-select>

3. 地区选择框模板+计算属性 #

原有计算属性逻辑无需大改，增加未选国家时的空值判断即可：

<v-select 
  style="grid-column: 1; width: calc(100% - 50px)" 
  :options="renderRegion" 
  label="titre"
  item-value="titre"
  v-model="regionChoose"
></v-select>

computed: {
  renderRegion() {
    if (!this.paysChoose) return []
    return this.regions.filter(item => item.pays === this.paysChoose)
  }
}

可选替代写法 #

如果不想配置item-value，需要保留paysChoose为完整对象的写法，只需调整计算属性的匹配逻辑即可：

computed: {
  renderRegion() {
    if (!this.paysChoose) return []
    // 匹配国家对象里的对应字段
    return this.regions.filter(item => item.pays === this.paysChoose.code)
  }
}

注意这种写法必须做空值判断，否则未选择国家时paysChoose为null，读取code属性会直接抛出JS错误。

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