[英]How to implement dirty state in VueJs
I am new to VueJs and I am working on a form that I want to enable the Save
button only when a change occurs at the model.我是 VueJs 的新手,我正在处理一个表单,我只想在模型发生更改时启用“ Save
”按钮。
My initial thought is to compute
a dirty function comparing the initial model with the current.我最初的想法是compute
一个脏函数,将初始模型与当前模型进行比较。
Note: This code is not tested, it's here just for an example.注意:此代码未经测试,此处仅作为示例。
var app = new Vue({
el: '#app',
data: {a:0, b:'', c:{c1:null, c2:0, c3:'test'}},
initialData: null,
mounted():{ initialData = JSON.parse(JSON.stringify(data));},
computed: {
isDirty: function () {
return JSON.stringify(data) === JSON.stringify(initialData)
}
}
});
Is there a better way of doing this or is there any improvement you could suggest on the above-mentioned code?有没有更好的方法来做到这一点,或者您可以对上述代码提出任何改进建议?
Borrowing from -- > https://stackoverflow.com/a/48579303/4050261借用——> https://stackoverflow.com/a/48579303/4050261
You can bind single onchange
event on the parent container and benefit from the fact that change events bubble:您可以在父容器上绑定单个onchange
事件,并从更改事件冒泡的事实中受益:
<div class="container" @change="someThingChanged()">
<input v-model="foo">
<input v-model="bar">
... etc.
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.