Javascript 将输入字段设置为禁用时，Vue会重置该字段

为什么Vue在将文本输入字段设置为禁用时会重置它？这不会发生在普通Javascript中，也不会发生在textarea中

var-app=新的Vue({
el:“.container”，
数据：{
残疾人士:错,，
fn：“约翰”，
ln:“史密斯”，
com：“我在这里的评论……”
},
方法：{
vue_禁用（）{
this.disabled=！this.disabled；
}	
}
});
函数js_disable（）{
document.getElementById（“名字”）.disabled=！document.getElementById（“名字”）.disabled；
document.getElementById（“comment”）.disabled=！document.getElementById（“comment”）.disabled；
}

Vue禁用字段
2019年8月22日

当我使用Vue将输入文本字段设置为禁用时，为什么会重置该字段？这不会发生在纯Javascript中，也不会发生在TEXTAREA中

在“名字”字段中键入新内容，然后单击第一个按钮。您输入的值消失，原始值被替换。
名字
姓
评论

使用Vue禁用/启用“名字”和“注释”字段


使用Javascript禁用/启用“名字”和“注释”字段

使用

v型

代替

：值

从：

使用

v-model

指令在表单输入、textarea和select元素上创建双向数据绑定

value

属性只设置输入的初始值

Vue使用

对象将getter/setter.defineProperty添加到
数据中的所有属性中。当一个依赖项的
setter
被触发时，它会通知观察者，并重新呈现组件（）。由于更改了
disabled
属性，整个组件重新呈现，并且
值
被设置为
数据中的任何内容


var-app=新的Vue({
el:“.container”，
数据：{
残疾人士:错,，
fn：“约翰”，
ln:“史密斯”，
com：“我在这里的评论……”
},
方法：{
vue_禁用（）{
this.disabled=！this.disabled；
}
}
});
函数js_disable（）{
document.getElementById（“名字”）.disabled=！document.getElementById（“名字”）.disabled；
document.getElementById（“comment”）.disabled=！document.getElementById（“comment”）.disabled；
}


名字
姓
评论

使用Vue禁用/启用“名字”和“注释”字段


使用Javascript禁用/启用“名字”和“注释”字段

ye ye，这解决了问题，但为什么会发生这种情况？这是有趣的一部分。@sølvetratøe我已经提到过了。“value属性只是设置输入的初始值”是的，但如果我没有弄错的话，这不是问题。我所理解的问题是，当他在输入字段上切换disabled时，输入得到了它的原始数据，就像输入被重新渲染一样谢谢，伙计们。我避免使用v-model，因为我不需要双向数据绑定。在我的实际代码中，初始值是JS对象树深处的值。我希望允许用户更改数据，然后（如果她选择这样做）将记录设置为“只读”（即禁用），然后保存记录（此时，如果数据已验证，我将更新树中的原始值）。我可以看到，我可以让它与v-modal一起工作，但我必须在将副本绑定到表单之前编写额外的代码来复制数据，并在提交时执行相反的操作。这并不优雅。我已将此作为错误提交给Vue团队：。与此同时，我已经用jQuery解决了这个问题。我猜当您切换禁用时，vue正在重新呈现输入字段，因此重新设置初始值，因为它不是v型，不能更改是，但奇怪的是textarea没有受到类似的影响！