请问 vue3 input 绑定一个常量 value 后咋还能输入咧
longjiahui · longjiahui · 2022-10-04 19:49:09 +08:00 · 2140 次点击这是一个创建于 762 天前的主题，其中的信息可能已经有所发展或是发生改变。
请问 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 。
|
|
18
longjiahui OP @renmu 是的，自己实现了一遍 v-model 💦
|
Select Language