Vue Select组件初始选项显示异常，切换标签页后恢复正常

1. 原生Select控件渲染缓存问题：异步加载数据后，Vue更新了<option>元素，但浏览器原生<select>的下拉菜单依赖内部渲染缓存，未自动触发重绘，导致选项显示空白。切换标签页时浏览器会触发全局重绘/回流，缓存刷新后选项恢复正常。
2. 响应式丢失隐患：原代码直接解构Pinia Store的newsletters，未使用storeToRefs，可能导致数据更新时Vue无法感知，加剧DOM更新不及时的问题。
3. 未声明v-model绑定变量：模板中v-model="selectedNewsletter"未在setup中声明响应式变量，存在潜在报错风险，也可能干扰控件渲染逻辑。

方案1：强制Vue重新渲染Select组件 #

通过给<select>绑定动态key，数据加载完成后更新key值，让Vue销毁并重建select元素，强制浏览器重新渲染下拉菜单：

模板修改 #

<select v-model="selectedNewsletter" class="newsletter-select" :key="renderKey">
  <option v-for="(newsletter, index) in newsletters" :key="index" :value="newsletter.name">
    {{ newsletter.name }} ({{ newsletter.recipients }} recipients)
  </option>
</select>

Setup代码修改 #

import { storeToRefs } from 'pinia'
import { ref, onMounted } from 'vue'

setup() {
  const newsletterStore = useNewsletterStore()
  const { newsletters } = storeToRefs(newsletterStore) // 修复响应式
  const renderKey = ref(0)
  const selectedNewsletter = ref('') // 补充v-model响应式变量

  onMounted(async () => {
    await newsletterStore.fetchNewsletters()
    renderKey.value += 1 // 数据加载完成后更新key，触发组件重建
  })

  return {
    newsletters,
    renderKey,
    selectedNewsletter
  }
}

方案2：手动触发浏览器重绘 #

在数据加载完成后，通过临时修改元素样式强制浏览器重绘：

import { storeToRefs } from 'pinia'
import { ref, onMounted } from 'vue'

setup() {
  const newsletterStore = useNewsletterStore()
  const { newsletters } = storeToRefs(newsletterStore)
  const selectedNewsletter = ref('')

  onMounted(async () => {
    await newsletterStore.fetchNewsletters()
    
    // 强制触发重绘
    const selectEl = document.querySelector('.newsletter-select')
    if (selectEl) {
      selectEl.style.display = 'none'
      void selectEl.offsetWidth // 强制浏览器计算布局，触发重绘
      selectEl.style.display = ''
    }
  })

  return {
    newsletters,
    selectedNewsletter
  }
}

方案3：修复响应式基础问题 #

确保Pinia State的响应式生效，这是避免此类问题的基础：

import { storeToRefs } from 'pinia'
import { ref, onMounted } from 'vue'

setup() {
  const newsletterStore = useNewsletterStore()
  // 使用storeToRefs解构，保留state的响应式
  const { newsletters } = storeToRefs(newsletterStore)
  const selectedNewsletter = ref('')

  onMounted(async () => {
    await newsletterStore.fetchNewsletters()
  })

  return {
    newsletters,
    selectedNewsletter
  }
}

内容的提问来源于stack exchange，提问作者Alejandro Peña