Vue如何检测表单输入变化

Question

在我的vue应用程序中，我有一个表单，它应该检测每个更改。我尝试使用@change和 也与观察者一起使用，但没有运气......

form: {
  name: "",
  surname: "",
  email: "",
},
changed: false

然后在我的模板中：

<form @change="hasChanged">

然后是我的观察者和方法：

watch: {
    form: {
        handler: function(v) {
            return this.hasChanged();
        },
        deep: true
    }
},
methods: {
  hasChanged(){
    this.changed = true
  }
}

但这不起作用......我做错了什么？

Answer 1

表单元素没有更改侦听器。考虑将每个输入与 onChanged 事件绑定。

从我看来，您似乎想知道表单是否已被编辑。在这种情况下你可以尝试这个

<template>
    <form>
        <input v-model="form.first_name"/>
        <input v-model="form.last_name"/>
        <input v-model="form.email"/>
    </form> 
</template>

<script>
    const defaultForm = {
        first_name: '',
        last_name: '',
        email: '',
    }  
    export default {
      data () {
        return {
            // form: defaultForm
            // edit
            form: {...defaultForm}
        }
      },
      computed: {
        hasChanged () {
          return Object.keys(this.form).some(field => this.form[field] !== defaultForm[field])
        }
      }
    }
</script>