uni-app 通过v-if切换uni-forms-item的显示和隐藏导致双向数据绑定错误

产品分类	PC开发环境操作系统	PC开发环境操作系统版本号	HBuilderX类型	HBuilderX版本号	第三方开发者工具版本号	基础库版本号	项目创建方式
uniapp/小程序/微信	Mac	13.5.2 (22G91)	正式	3.96	1.06.2310080	3.2.0	HBuilderX

示例代码：

<template>  
    <view>  
        <pre>{{form}}</pre>  
        <uni-forms ref="formRef" :model="form" label-position="top" label-width="100">  
            <uni-forms-item label="提醒类型" name="type">  
                <radio-group @change="changeType" class="radio-group">  
                    <label class="radio-group-item">  
                        <radio value="1" color="#7197FD" :checked="form.type === '1'" />  
                        <text>1</text>  
                    </label>  
                    <label>  
                        <radio value="2" color="#7197FD" :checked="form.type === '2'" /><text>2</text>  
                    </label>  
                </radio-group>  
            </uni-forms-item>  
            <uni-forms-item v-if="form.type === '1'" label="project" name="project">  
                <textarea  v-model="form.project" style="height: 60rpx;" />  
            </uni-forms-item>  
            <uni-forms-item label="content" name="content">  
                <textarea  v-model="form.content" style="height: 60rpx;" />  
            </uni-forms-item>  
            <uni-forms-item label="target" name="target">  
                <textarea  v-model="form.target" style="height: 60rpx;" />  
            </uni-forms-item>  
        </uni-forms>  
    </view>  
</template>  

<script setup lang="ts">  
import { ref } from 'vue'  
let form = ref({  
    type: '1',  
    project: '',  
    content: '',  
    target: ''  
})  
// 修改提醒类型  
const changeType = (e) => {  
    form.value.type = e.detail.value  
}  
</script>

bupafengyu 1楼•4 天前

在 Uni-App 中使用 v-if 切换 uni-forms-item 的显示和隐藏时，可能会导致双向数据绑定失效或出现错误。这是因为 v-if 会完全销毁和重建 DOM 元素，而 v-show 只是切换元素的 display 属性。因此，使用 v-if 时，元素的状态（包括绑定的数据）可能会被重置。

解决方案

1. 使用 `v-show` 代替 `v-if`

v-show 只是切换元素的 display 属性，不会销毁和重建 DOM 元素，因此不会影响双向数据绑定。

<uni-forms-item v-show="isVisible">
  <input v-model="formData.field" />
</uni-forms-item>

2. 使用 `key` 属性

如果你必须使用 v-if，可以通过给 uni-forms-item 添加 key 属性来强制重新渲染组件，从而避免数据绑定问题。

<uni-forms-item v-if="isVisible" :key="formData.field">
  <input v-model="formData.field" />
</uni-forms-item>

3. 手动管理数据

在切换 v-if 时，手动管理数据的状态，确保数据在组件销毁和重建时不会丢失。

<template>
  <uni-forms-item v-if="isVisible">
    <input v-model="formData.field" />
  </uni-forms-item>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
      formData: {
        field: ''
      }
    };
  },
  watch: {
    isVisible(newVal) {
      if (newVal) {
        // 当组件显示时，恢复数据
        this.formData.field = this.savedField;
      } else {
        // 当组件隐藏时，保存数据
        this.savedField = this.formData.field;
      }
    }
  },
  created() {
    this.savedField = ''; // 初始化保存的数据
  }
};
</script>

4. 使用 `keep-alive`

如果你希望保留组件的状态，可以使用 keep-alive 包裹组件，这样在组件切换时不会销毁组件实例。

<keep-alive>
  <uni-forms-item v-if="isVisible">
    <input v-model="formData.field" />
  </uni-forms-item>
</keep-alive>