v-if二次切换后无法回显问题求助

问题根源 #

你遇到的问题是类型不匹配导致的：

• 初始化时form.is_one是布尔值true，但下拉框的<option>值是字符串类型的"true"和"false"。
• 第一次切换到"no"时，form.is_one被赋值为字符串"false"，此时form.is_one === true为false，正常显示"Name 2"。
• 切换回"yes"时，form.is_one变成字符串"true"，而"true" === true是false（严格相等会校验类型），所以v-if条件不满足，依然显示"Name 2"。你看到的{{ form.is_cc }}应该是笔误，实际显示的form.is_one是字符串值，并非布尔值。

修复方案 #

方案1：统一值的类型（推荐）

给<option>的value用v-bind绑定布尔值，确保选中时赋值的是布尔类型：

<select-input v-model="form.is_one" :error="form.errors.is_one" class="pb-8 pr-6 w-full lg:w-1/6" label="switch">
    <option :value="true">yes</option>
    <option :value="false">no</option>
</select-input>

这样form.is_one始终保持布尔类型，v-if="form.is_one === true"的判断会完全生效。

方案2：调整判断条件

如果不想修改下拉框的value类型，可以把严格相等改为非严格相等，或者直接判断值的布尔语义：

<!-- 非严格相等 -->
<div v-if="form.is_one == true" class="pb-8 pr-6 w-full lg:w-5/6">
<!-- 或直接判断布尔意义 -->
<div v-if="form.is_one" class="pb-8 pr-6 w-full lg:w-5/6">

不过这种方式不如方案1严谨，容易埋下类型相关的隐患。

更优的组件切换实现 #

场景1：同一组件仅属性不同（当前场景）

不需要用v-if/v-else切换两个DOM块，直接动态绑定label属性即可，减少不必要的组件销毁和重建：

<div class="pb-8 pr-6 w-full lg:w-5/6">
    <text-input 
        v-model="form.name" 
        :error="form.errors.name" 
        :label="form.is_one ? 'Name 1' : 'Name 2'" 
    />
</div>

场景2：后续需要切换不同组件

使用Vue的动态组件特性，代码更简洁灵活：

<div class="pb-8 pr-6 w-full lg:w-5/6">
    <component 
        :is="form.is_one ? 'ComponentA' : 'ComponentB'"
        v-model="form.name" 
        :error="form.errors.name" 
    />
</div>

只需提前注册好ComponentA和ComponentB，就能根据条件自动切换。

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