我有一个简单的表单,只是为了实验目的而创建的。我试图保持按钮禁用,除非原始表单数据发生更改,但如果数据更改恢复到原始数据(撤消),仍保持按钮禁用。
<template lang="pug">
form(@click.prevent="save")
.main
input(v-model="user.name")
input(v-model="user.email")
input(v-model="user.age")
select(v-model="user.sex")
option Male
option Female
.footer
button(:disabled="isFormEnable") Save
</template>
<script>
export default {
name: 'userForm',
data () {
return {
user: {
name: 'John Doe',
email: 'john@gmail.com',
age: '35',
sex: 'Male',
}
}
},
computed: {
isFormEnable () {
// I am not sure what I need to do here but something like this may be:
if (user.name) { return true }
}
},
methods: {
save () {
console.log('Form Submitted')
}
}
}
</script>
我找到了一个 jQuery 解决方案 here但我正在寻找 vanilla/vue javascript 解决方案。
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this)
.find('input:submit, button:submit')
.prop('disabled', $(this).serialize() == $(this).data('serialized'))
;
})
.find('input:submit, button:submit')
.prop('disabled', true)
;
最佳答案
这是我如何在 1 个模块的帮助下做到这一点
npm 我深度差异
deep-diff
用于比较对象值。
<script>
import { diff } from "deep-diff";
// default form value
const defaultUser = {
name: "John Doe",
email: "john@gmail.com",
age: "35",
sex: "Male"
};
export default {
//...
data() {
return {
user: { ...defaultUser } // cloning the object using object spread syntax
};
},
computed: {
isFormEnable() {
// check if it's default value
if (!diff(this.user, defaultUser)) return false;
return true;
}
},
//...
};
</script>
关于javascript - Vue.js - 禁用提交按钮,除非原始表单数据已更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49623074/