Vue determines whether the form has changed

Vue is one of the very popular front-end frameworks for building interactive web applications. In Vue, forms are one of the core features. Forms are HTML elements used to collect data from users. They can contain various types of form elements, such as text input boxes, drop-down lists, radio buttons, check boxes, and more. However, a very practical function in Vue is to determine whether the form has changed, which can usually be used to do some operations, such as prompting the user to save unsaved changes, disabling or enabling the save button, etc. In this article, we will explore how to use Vue to determine whether a form has changed.

1. Use v-model to bind form data

In Vue, use the v-model directive to bind form data to the data object of the Vue instance. For example, in a text input box, you can use the v-model directive to bind the entered value to the data object of the Vue instance. As shown below:

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  }
}
</script>

The above code will create a text input box. When the value of the input box changes, the name data attribute of the Vue instance will also change accordingly.

2. Use calculated properties to determine whether the form has changed

The data properties in the Vue instance can be used to save the current value of the form. But how to tell whether the form has changed? You can use Vue's computed properties to solve this problem. A computed property is a special type of property in Vue whose value is calculated from other data properties. For example, in the above example, you can create a calculated property to determine the changed status of the form, as shown below:

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
  }
}
</script>

In the above code, we created a calculated property isDirty, which is used to determine whether the form has changed. . The value of a computed property is calculated by comparing the current form value with the original form value. In order to save the original form value, we also create a data attribute originalName and set its value to the initial value of name when mounting. When the form value changes, the value of the isDirty computed property changes.

3. Use watch to monitor changes in form values

In addition to calculated properties, Vue also provides another special property, watch, for monitoring changes in data properties. The watch attribute can monitor changes in one or more data attributes and perform specific operations when the data changes. In the form, we can use the watch attribute to monitor changes in the form value, as shown below:

<template>
  <div>
    <input type="text" v-model="name">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 创建一个名为name的数据属性
      originalName: '' // 创建一个名为originalName的数据属性，用于保存原始值
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.originalName
    }
  },
  mounted() {
    this.originalName = this.name // 记录表单的原始值
    this.$watch('name', (newValue, oldValue) => {
      if (newValue !== oldValue) {
        console.log('表单值改变')
        this.$emit('change') // 触发自定义事件change
      }
    })
  }
}
</script>

In the above code, we created a watch attribute to monitor changes in the name attribute, and execute the corresponding actions when the value changes. operation. In this example, as long as the value of the name attribute changes, the custom event change will be triggered. This event can be monitored and processed in the parent component.

4. Use the v-once command to save the initial value of the form

There is another way to save the initial value of the form, and that is to use the v-once command. v-once is a directive in Vue. Its function is to bind the element once when it is first bound, and then the element will not be updated. Use the v-once directive to save the form's initial value in the value attribute of the text input box. As shown below:

<template>
  <div>
    <input type="text" v-model="name" v-once:value="originalName">
    <p>表单是否改变: {{ isDirty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '' // 创建一个名为name的数据属性
    }
  },
  computed: {
    isDirty() {
      return this.name !== this.$el.querySelector('input').value
    },
    originalName() {
      return this.name // 返回表单的初始值
    }
  }
}
</script>

In the above code, we use the v-once instruction to bind the value attribute of the input element and save the initial value in the value attribute of the form element. Using the calculated property originalName, the initial value can be returned to the isDirty calculated property for calculation to determine whether the form has changed.

Summary

In Vue, judging whether the form has changed is a very practical function. It can be used to prompt the user to save unsaved modifications, disable or enable the save button, etc. Vue provides many ways to achieve this functionality, such as using data properties, calculated properties, watch properties, and v-once directives. Choosing the appropriate method depends on actual needs and specific scenarios. But no matter which method is used, you need to remember to save the initial value of the form and update the status in time to determine whether the form has changed.

The above is the detailed content of Vue determines whether the form has changed. For more information, please follow other related articles on the PHP Chinese website!