请问 vue3 input 绑定一个常量 value 后咋还能输入咧
longjiahui longjiahui 2022-10-04 19:49:09 +08:00 2520 次点击这是一个创建于 1178 天前的主题，其中的信息可能已经有所发展或是发生改变。
请问 vue3 中 input 怎么做控制输入内容的需求会比较好
<script> export default { } </script> <template> <input :value="1234" placeholder="edit me" /> </template> 类似这样，input 仍然是可以输入的
第 1 条附言 2022-10-04 22:32:11 +08:00
<script setup> import { ref, watch } from 'vue' let data = ref('test') function handleInput(e){ data.value = 'hello' // 少了这句input 就能够一直输入东西 // 那么input元素的:value 并不能确保binding的value的内容了。而是需要自己手动操作dom元素? e.target.value = 'hello' } </script> <template> <input :value="data" @input="handleInput($event)" placeholder="edit me" /> </template> 第 2 条附言 2022-10-04 22:55:56 +08:00
我暂时的解决方法是用 组件改了一下。
```
<template>
<input type="text" :value="value" @input="handleInput">
</template>
<script setup>
let props = defineProps({
value: String,
})
let emit = defineEmits(['update:value'])
function handleInput(e){
emit('update:value', e.target.value)
e.target.value = props.value
}
</script>
```
改之前好像是和 react 的 input 比较像
```
<template>
<input type="text" :value="value" @input="handleInput">
</template>
<script setup>
let props = defineProps({
value: String,
})
let emit = defineEmits(['update:value'])
function handleInput(e){
emit('update:value', e.target.value)
e.target.value = props.value
}
</script>
```
改之前好像是和 react 的 input 比较像
 | 1 cyrbuzz 2022-10-04 19:59:13 +08:00 创建一个变量，:value 换成 v-model ，或者新建一个变量，注册 input 事件。 |
 | 2 biabia123456 2022-10-04 21:17:48 +08:00 做一个假的 input? 想让用户输入的时候 换成真的并聚焦 |
 | 3 longjiahui OP @cyrbuzz 附言里加了说明、我总觉得我的操作不太科学。 |
| 4 longjiahui OP @biabia123456 现在想做的方法是 写个 input 组件模拟 vue2 时的特性来用，就是 binding 的 value 是啥，input 的输入框内容就显示啥。 |
| 6 longjiahui OP @skies457 粗暴了点、input 事件不响应啦、响应 input 来修改内容还是比较方便的。 |
 | 7 cxe2v 2022-10-04 22:50:59 +08:00 似乎你可以加 readonly |
| 8 longjiahui OP @cxe2v 试了呢、不响应 input |
 | 9 lsry 2022-10-05 00:47:26 +08:00 data.value 是量然可以修改了。如果不想用入， input 加 disable ，不喜式的，自己改一下吧。如果用入特定的内容，可以加校。或者你述下需求。 |
 | 10 renmu 2022-10-05 00:54:25 +08:00 via Android 没看懂你到底想做什么，v-model 不就能实现 |
| 11 renmu 2022-10-05 00:55:51 +08:00 via Android 没看懂你到底想做什么，v-model 不能实现吗?为什么自己实现了一遍 v-model |
 | 13 WhateverYouLike 2022-10-05 01:22:41 +08:00 |
| 14 longjiahui OP @WhateverYouLike yes ！是可以的。我完全没想到 nexttick 大概习惯了 vue2 的方式，vue3 这种 input 绑定 value 不能固定下来的感觉不太舒适。 |
| 15 longjiahui OP @renmu 给 input 绑定 value 无论如何 vue2 会显示 value 绑定的内容，但 vue3 就不一定了耶。可以参考内容和附言 1 ，2 的 demo |
| 16 WhateverYouLike 2022-10-05 01:43:14 +08:00 @longjiahui Vue2 难道能 “固定” 吗？ |
| 17 longjiahui OP @WhateverYouLike 刚试了不能耶 我为什么觉得 2 可以。哈哈哈哈哈哈哈、非常有可能是因为我一直用的是封装过的 element-ui 的 input 。 |
![longjiahui](https://cdn.v2ex.com/avatar/d1ab/0ef8/213281_normal.png?m=1486258752") | 18 longjiahui OP @renmu 是的，自己实现了一遍 v-model |
Select Language