How to handle the addition, deletion, modification and query operations of form data in Vue technology development

How to handle the addition, deletion, modification and query operations of form data in Vue technology development

In the development of Vue technology, the addition, deletion, modification and query operations of form data are very common requirements. This article will introduce how to use Vue technology to handle these operations and provide specific code examples.

First, we need to create a Vue instance and define an empty array in the data attribute to store the form data. For example:

new Vue({
  data() {
    return {
      formData: []
    }
  }
})

Next, we can use the v-for directive in the template to render the form data and display it. For example:

<div v-for="item in formData" :key="item.id">
  {{ item.name }}
</div>

When processing the addition of form data, we can use the v-model directive to bind the value of the form element and add the data to the array when the form is submitted. For example:

<form @submit="addFormData">
  <input type="text" v-model="newName">
  <button type="submit">添加</button>
</form>

methods: {
  addFormData(event) {
    event.preventDefault();
    this.formData.push({
      id: this.formData.length + 1,
      name: this.newName
    });
    this.newName = '';
  }
}

When processing the deletion operation of form data, we can use the v-on instruction to bind the click event and delete the corresponding data according to the index of the data. For example:

<div v-for="(item, index) in formData" :key="item.id">
  {{ item.name }}
  <button @click="deleteFormData(index)">删除</button>
</div>

methods: {
  deleteFormData(index) {
    this.formData.splice(index, 1);
  }
}

When processing the modification operation of form data, we can control the display and hiding of form elements through an editing state, and use two-way data binding to update the form data. For example:

<div v-for="(item, index) in formData" :key="item.id">
  <div v-if="!item.editing">{{ item.name }}</div>
  <div v-else>
    <input type="text" v-model="item.name">
    <button @click="updateFormData(index)">保存</button>
  </div>
  <button @click="editFormData(index)">编辑</button>
</div>

methods: {
  editFormData(index) {
    this.formData[index].editing = true;
  },
  updateFormData(index) {
    this.formData[index].editing = false;
  }
}

Finally, when processing query operations on form data, we can use calculated properties to filter the data in the array, and use the v-model directive in the input box to bind search conditions. For example:

<input type="text" v-model="searchKeyword">
<div v-for="item in filteredData" :key="item.id">
  {{ item.name }}
</div>

computed: {
  filteredData() {
    return this.formData.filter(item => item.name.includes(this.searchKeyword));
  }
}

Through the above code examples, it can be seen that Vue technology can easily handle the addition, deletion, modification and query operations of form data. Developers can make appropriate adjustments and extensions according to specific needs to achieve richer functions.

To sum up, when processing the addition, deletion, modification and query operations of form data in Vue technology development, you need to pay attention to the following points:

1. Use the v-model instruction for two-way data binding for real-time Update form data.
2. Use the v-for instruction to render and display data.
3. Use the v-on directive to bind events to handle data deletion operations.
4. Use calculated properties to filter and query data.

I hope this article can help readers better understand and apply Vue technology to process the addition, deletion, modification and query operations of form data.

The above is the detailed content of How to handle the addition, deletion, modification and query operations of form data in Vue technology development. For more information, please follow other related articles on the PHP Chinese website!