uni-app input组件由父级view使用v-if else控制切换时，发现view中的其他组件切换了但input并没有切换

uni-app input组件由父级view使用v-if else控制切换时，发现view中的其他组件切换了但input并没有切换

开发环境 版本号 项目创建方式
Windows 10 HBuilderX
Android Android 12
小米 mi9pro5g

操作步骤：

  • 切换 longinType 后直接复现

预期结果：

  • input将切换为对应view中的input

实际结果：

  • 始终是第一个view中的input

bug描述：

<view v-if="longinType === 'psw'" class="a-input">  
    <view class="input-box">  
        <input placeholder="请输入密码" class="input" id="i1" v-model="password" :password="showPsw" />  
        <view class="input-btn is-icon" @tap="showPsw=!showPsw">  
            <text v-if="showPsw" class="qd-icon input-btn-text">&#xe63e;</text>  
            <text v-else class="qd-icon input-btn-text">&#xe62b;</text>  
        </view>  
    </view>  
    <text class="tip-text input-tips">请输入密码</text>  
    <text v-if="showErrPsw" class="err-text input-tips" style="bottom: 0;">{{showErrPsw}}</text>  
</view>  

<view v-else class="a-input">  
    <view class="input-box">  
        <input placeholder="请输入验证码" class="input" id="i2" type="number" v-model="ecode" />  
        <view v-if="ecodeTime"  class="input-btn is-code disable">  
            <text class="input-btn-text">{{ecodeTime}}s</text>  
        </view>  
        <view v-else  class="input-btn is-code" @tap="sendSms">  
            <text class="input-btn-text">获取验证码</text>  
        </view>  
    </view>  
    <text class="tip-text input-tips">请输入验证码</text>  
    <text v-if="showErrEcode" class="err-text input-tips" style="bottom: 0;">{{showErrEcode}}</text>  
</view>

更多关于uni-app input组件由父级view使用v-if else控制切换时，发现view中的其他组件切换了但input并没有切换的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

应该是渲染机制的问题，虚拟dom检测到dom结构一致，所以沿用了最初的dom模型去渲染。 我建议给input绑一个v-if，或者用v-show来操作判断

更多关于uni-app input组件由父级view使用v-if else控制切换时，发现view中的其他组件切换了但input并没有切换的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我尝试修改了dom结构，没有效果；给input单独绑定了v-if，没有效果；nvue没有v-show。

回复 9***@qq.com: 那我建议你封装成组件，或者把这两个input合成一个

回复 onion一只洋葱: 没有效果，我最后只能把这个需求做成页面切换

这是一个常见的 uni-app 渲染优化问题。当使用 v-if/v-else 切换包含 input 组件的视图时，由于 Vue 的复用机制，input 可能被错误复用。

问题原因： Vue 在 DOM 更新时会尽可能复用相同类型的元素。两个 view 中的 input 元素类型相同，Vue 可能认为这是同一个 input，只是属性发生了变化，因此直接更新现有 input 的属性而非创建新实例。

解决方案：

  1. 使用 key 属性强制重新渲染（推荐）：
<view v-if="longinType === 'psw'" class="a-input" key="psw-input">
    <!-- 密码输入框内容 -->
</view>

<view v-else class="a-input" key="code-input">
    <!-- 验证码输入框内容 -->
</view>
  1. 或者在 input 上直接添加 key：
<input 
    placeholder="请输入密码" 
    class="input" 
    v-model="password" 
    :password="showPsw"
    key="psw-input-field"
/>
  1. 使用 v-show 替代（如果条件切换频繁）：
<view v-show="longinType === 'psw'" class="a-input">
    <!-- 密码输入框内容 -->
</view>

<view v-show="longinType !== 'psw'" class="a-input">
    <!-- 验证码输入框内容 -->
</view>
回到顶部