vue input changes values ​​before and after

Vue is a popular JavaScript framework that makes it easy to create responsive components. In WEB development, input boxes in components are one of the most common elements. In many scenarios, developers need to track the value of an input box and process it. In this article, we will discuss how to handle the modified values ​​of input boxes in Vue.

Listening to the input box

Vue provides a variety of ways to monitor the value of the input box. The most common way is to use v-model. The v-model directive implements two-way binding, which means that modifications to the input box will be reflected in the data attributes in the component instance, and when the value of the data attribute changes, the input box will also Automatically update the corresponding value.

The following is a simple example that demonstrates how to use v-model to monitor the value of a text input box:

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  }
};
</script>

In the above example, we use v-model binds a text input box and maintains a username data attribute in the component instance. When the user enters a value in the input box, the username data attribute will be automatically updated, and the difference expression {{ username }} in the template will also be updated accordingly.

Record the value of the input box before and after modification

In some scenarios, we need to know the value of the input box before and after modification. For example, in a form, we want to be able to track the changes made by the user and save these changes to a changes array for subsequent use.

In Vue, we can use watch to monitor changes in data attributes. When the value of a data attribute changes, we can use the handler function to perform some operations.

We can use the following code to record the before and after modification values ​​of a single input box:

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
    <pre v-text="JSON.stringify(changes)">

<script> export default { data() { return { username: "", changes: [] }; }, watch: { username(newVal, oldVal) { if (newVal !== oldVal) { this.changes.push({ before: oldVal, after: newVal }); } } } }; </script>

Copy after login

In the above code, we record by adding a new changes array. Each modification of the input box. We have slightly modified the handler function in the watch option, now it will be triggered when the value of the input box changes. When the new value is not equal to the old value, we store the previous value and the next value in the form of objects in the changes array.

Record the values ​​of multiple input boxes

In actual development, we usually need to monitor the values ​​of multiple input boxes. In this case, we can use an object with the same format to store all input box changes. The attribute name in the object is the ID or name of the input box, and the attribute value is an object that contains the value before and after the input box is modified.

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="formData.username">
    <p>用户名: {{ formData.username }}</p>

    <label for="email">邮箱:</label>
    <input id="email" v-model="formData.email">
    <p>邮箱: {{ formData.email }}</p>

    <pre v-text="JSON.stringify(changes)">

<script> export default { data() { return { formData: { username: "", email: "" }, changes: {} }; }, watch: { formData: { handler(newVal, oldVal) { // 遍历对象 formData for (const key in newVal) { // 如果 newValue 和 oldValue 不同 if (newVal[key] !== oldVal[key]) { // 新增一个属性，属性名为输入框的名称或 ID if (!this.changes[key]) { this.$set(this.changes, key, {}); } // 设置属性值， 属性值包含 before 和 after 两个字段 this.changes[key].before = oldVal[key]; this.changes[key].after = newVal[key]; } } }, // 深度监听对象中的属性，当数据属性的值发生改变时，handler 中 callBack 函数将被执行。 deep: true } } }; </script>

Copy after login