양식 입력 변경 감지 방법 보기

양식 입력 변경 감지 방법 보기

인마이vue- app 저는 각 변경 사항을 감지하는 폼을 가지고 있습니다.사용하려고 했습니다.@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
  }
}

하지만 이건 안 돼...내가 뭘 잘못하고 있지?

양식 요소에 변경 수신기가 없습니다.대신 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
        }
      },
      computed: {
        hasChanged () {
          return Object.keys(this.form).some(field => this.form[field] !== defaultForm[field])
        }
      }
    }
</script>

vuejs의 시계를 사용할 수 있습니다. 매우 간단한 속임수입니다.

watch: {
   'form': {
        handler: function(v) {
         return this.enableFormSubmission();
        },
        deep: true
    }
},

@Babacar에 근거하여hasChanged항상 false를 반환하다form그리고.defaultForm같은 오브젝트를 참조합니다.렌더링하기 전에 양식은 복사본이어야 합니다.일반 케이스와 중첩된 오브젝트에 얕은 복사본을 사용할 수 있습니다. 딥 복사본을 사용해야 합니다.

<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 } // copy here
        }
      },
      computed: {
        hasChanged () {
          return Object.keys(this.form).some(field => this.form[field] !== defaultForm[field])
        }
      }
    }
</script>

언급URL : https://stackoverflow.com/questions/63706291/vue-how-to-detect-form-input-changes