如题，vue3下打开弹窗时，没法修改v-model绑定的值
陈慕一
- 发布：2024-07-09 09:28
- 更新：2024-07-09 18:00
- 阅读：811
爱豆豆 - 办法总比困难多
uni-popup-dialog的源码中 input的值是在组件触发created时赋值的 也就导致了input只会赋值一次 后面无法通过动态修改 你看下uni-popup-dialog源码就明白了
可以动态控制uni-popup-dialog的显示和隐藏 来触发组件内的created方法 然后让你修改的值显示出来
<template>
<view class="">
<view>
<button type="primary" @click="showPopup"><text>输入对话框</text></button>
<uni-popup @change="popupChange" ref="inputDialog" type="dialog">
<uni-popup-dialog v-if="isShowDialog" mode="input" title="输入内容" v-model="text"
placeholder="请输入内容"></uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
const inputDialog = ref()
const isShowDialog = ref(false)
const text = ref('111')
const showPopup = () => {
inputDialog.value.open()
text.value = '222'
}
const popupChange = (val) => {
isShowDialog.value = val.show
}
</script>
爱豆豆 - 办法总比困难多
可以修改啊 你怎么使用的 能提供下复现demo吗 帮你看看
-
陈慕一 (作者)
<uni-popup-dialog
confirmText="保存"
ref="inputClose"
mode="input"
title="添加项目"
v-model="dialogInput"
placeholder="请输入内容"
@confirm="submitProject"
></uni-popup-dialog>，
const edit = (e) => {
dialogInput.value = e.name
addPopup.value.open()
}
就是点击按钮，打开弹窗， 然后给弹窗中的input 赋值2024-07-09 16:58
-
-
-
陈慕一 (作者)
解决咯 谢谢啦
2024-07-11 08:17