请问 vue3 input 绑定一个常量 value 后咋还能输入咧

[longjiahui]

请问 vue3 中 input 怎么做控制输入内容的需求会比较好

<script>
export default {
}
</script>

<template>
	<input :value="1234" placeholder="edit me" />
</template>

类似这样，input 仍然是可以输入的 😢

<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>

demo 👈

我暂时的解决方法是用 组件改了一下。
```
<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 比较像

[cyrbuzz]

创建一个变量，:value 换成 v-model ，或者新建一个变量，注册 input 事件。

[biabia123456]

做一个假的 input? 想让用户输入的时候 换成真的并聚焦

[longjiahui]

@cyrbuzz 附言里加了说明、我总觉得我的操作不太科学。

[longjiahui]

@biabia123456 现在想做的方法是 写个 input 组件模拟 vue2 时的特性来用，就是 binding 的 value 是啥，input 的输入框内容就显示啥。

[skies457]

加上 @keydown="$event.preventDefault()"？

[longjiahui]

@skies457 粗暴了点、input 事件不响应啦、响应 input 来修改内容还是比较方便的。

[cxe2v]

似乎你可以加 readonly

[longjiahui]

@cxe2v 试了呢、不响应 input

[lsry]

data.value 是變量當然可以修改了。如果不想讓用戶輸入，給 input 加 disable ，不喜歡樣式的話，自己改一下吧。如果讓用戶輸入特定的内容，可以加校驗。或者你詳述下需求。

[renmu]

没看懂你到底想做什么，v-model 不就能实现

[renmu]

没看懂你到底想做什么，v-model 不能实现吗?为什么自己实现了一遍 v-model

[WhateverYouLike]

下面链接里的方法奏效，唯一的好处是不用显示手动设置 e.target.value 了...
然后还要慎用，最好把这个 input 抽成一个组件后再用这种方法：
https://sfc.vuejs.org/#eNp9ks9OwzAMxl/FipC6aV3LeQwE4sQDcMultC7L1PxR4rZM094dJxnTYBKn1vHnn53POYoX56ppRLER29B65QgC0uiepAFQ2llPcASPfQlzQ+0O4AS9txoKLiqiaECCrqEGHqNsURAGKpYPv+o/kV5H79HQmwnUmBZvMK3lDEyaMbfqxbJy3n4dEvWnqWLpfTrpR9OSsgZ2jekGfDNupAUujzEHabhqaoYRuSCPBytQq1WqBahr6K3nkUbHUgSyEA6mBRUxRYBJ4Qyzoh0kyKVI9WBssquEpif0uaLMnyyG2ZqCNZGXEB3f+SovjSRJk67u0gjvaYJFdu+UO7HEbOu8G94KB4TaDayLEW0zbZNwj1LE20oBz+mY42tL7nBiU5ecBga0uLNDh55F2CkCjZyo0+Jjx0sXUYq8yLVuXLUP1vBjSd7KcyJIsYGz21LwRmPMrYlc2NR16Nv4xPahsv6z5r/Kj4aUxgqDXn94Owf0DJaivGLUfDihX/M74CHR/8f8I73hnu08idM33hgBhA==

[WhateverYouLike]

又发现一种方法：
等 dom 自个儿更新完了以后，再把 data.value 写进去...
https://sfc.vuejs.org/#eNp9UctOwzAQ/JWVhZRWTRPOoUVw5M7RF+NsqEv8kL1JQVX+nXVSqgokbh7PeGZ3fBbPIVTjgKIRu6SjCQQJaQiP0gEYG3wkOEPEroSTIn0oweEnvRr9ARN00Vso+HWR1T0StIoU7LN+VRAmKtYP0v2Qhpl7xgAqfTkN3eA0Ge/goFzb44sLA61wfc4K1pyUoWvaajYiSTmhGlU/ILstGbABs9nMxtPyNmfu6mUf3oQBoQ29IsyIdiZHQTPb7KXInlLA03zN+HaeOxzR0ZppYAONB9+3GFmELY9nkYl6LisnXlNEKZbytlaF6pi844LnxeSFSFI0cFlVCu4wY44mCqmp69Tp/C3HVPn4XvOpioMjY7HCZLdv0Z8SRjaWorzxqPlyxLiN6HhIjP95/pL+8b3UOYnpG8cwuw4=

[longjiahui]

@WhateverYouLike yes ！是可以的。我完全没想到 nexttick
大概习惯了 vue2 的方式，vue3 这种 input 绑定 value 不能固定下来的感觉不太舒适。

[longjiahui]

@renmu 给 input 绑定 value 无论如何 vue2 会显示 value 绑定的内容，但 vue3 就不一定了耶。可以参考内容和附言 1 ，2 的 demo

[WhateverYouLike]

@longjiahui Vue2 难道能 “固定” 吗？

[longjiahui]

@WhateverYouLike 刚试了不能耶 😢我为什么觉得 2 可以。哈哈哈哈哈哈哈、非常有可能是因为我一直用的是封装过的 element-ui 的 input 。

[longjiahui]

@renmu 是的，自己实现了一遍 v-model 💦

[cyrbuzz]

```
<script setup>
import { ref } from 'vue'
const data = ref('test');
function handleInput(e){
data.value = e.target.value
}


</script>

<template>
<input :value="data" @input="handleInput" placeholder="edit me" />
</template>
```

不用 v-model 这样不就好了嘛= =？