Vue input手动赋值后无法修改问题

Vue中数据绑定问题及解决方法

最新推荐文章于 2024-04-24 10:16:09 发布

原创最新推荐文章于 2024-04-24 10:16:09 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

input

1 篇文章

订阅专栏

当在Vue中遇到手动赋值给input后数据无法修改的情况，可以通过使用`this.$set()`或`replace`方法来解决。`this.$set()`适用于数组和对象，它允许动态地添加响应式属性。例如，对于数组，可以使用`Vue.set(arr, index, newValue)`；对于对象，可以使用`Vue.set(obj, property, value)`。另外，`replace`方法可用于字符串替换，如`stringObj.replace(find, replace)`，在本例中用于移除小数点。

当获取数据之后，手动赋值给input，会出现渲染成功，能读取数据，但是无法修改情况。
解决方法1：this.$set()

Vue中this.$set的用法
// 数组：第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值
// 对象：第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值
Vue.set( target, propertyName/index, value )
参数
{Object | Array} target
{string | number} propertyName/index
{any} value

方法2：使用replace
replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串
例子：

var stringObj="1.23";
//替换.为''
var newstr=stringObj.replace(".","");

正则的自行寻找吧