Vue3 Select组件选中值不显示问题求助

问题核心 #

选中下拉选项后，控制台能打印出选中值，但组件前端的选中状态未更新，即使使用ref绑定selectedDestinyCountryOption也无效。

问题分析 #

1. 模板与状态未关联：组件模板中按钮显示的是activeSelect，但内部修改的是selectedDestinyCountryOption，两者无关联，修改ref值不会影响前端显示。
2. Store状态更新方式错误：直接通过(generalTerms as { [key: string]: unknown })[storeName] = valueSelected修改Pinia Store属性，这种方式无法触发Vue的响应式更新。
3. 冗余的ref变量：selectedDestinyCountryOption仅初始赋值了Store值，后续Store更新时不会同步，且模板未使用该变量，属于无效代码。

解决方案 #

1. 修正Store状态更新逻辑

在Pinia Store中定义专门的action来修改状态，确保响应式更新：

// useQuotationStore.ts
export const useQuotationStore = defineStore('quotation', {
  state: () => ({
    generalTerms: {
      selectedOriginCountryOption: '',
      // 其他属性
    },
    payments: {}
  }),
  actions: {
    updateGeneralTerm(key: string, value: unknown) {
      this.generalTerms[key] = value;
    },
    updatePayment(key: string, value: unknown) {
      this.payments[key] = value;
    }
  }
})

2. 调整组件内部逻辑

移除冗余的ref变量，改用Store的action更新状态：

<script setup lang="ts">
import { useQuotationStore } from '@/stores/quotation'

const props = defineProps<{
  storeName: string;
  activeSelect: string;
  title: string;
  classDescription: string;
  options: Array<{ id: number; country: string }>;
  section: 'generalTerms' | 'payments';
}>()

const store = useQuotationStore()

const handleSelection = (valueSelected: string, storeName: string) => {
  if (props.section === 'payments') {
    store.updatePayment(storeName, valueSelected)
  } else if (props.section === 'generalTerms') {
    store.updateGeneralTerm(storeName, valueSelected)
    console.log(store.generalTerms[storeName])
  }
}
</script>

<template>
  <div class="dropdown" :class="['responsive-dropdown', classDescription]">
    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
      {{ activeSelect === '' ? title : activeSelect }}
    </button>
    <ul class="dropdown-menu">
      <li v-for="option in options" :key="option.id">
        <button class="dropdown-item" type="button" @click="handleSelection(option.country, storeName)">
          {{ option.country }}
        </button>
      </li>
    </ul>
  </div>
</template>

3. 确保父组件传值响应式

父组件传入的activeSelect绑定的是Store状态，只要Store通过action正确更新，子组件的activeSelect会自动同步最新值，前端选中状态即可正常更新。

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