How to implement addition, deletion, modification and query of data in Vue and combine it with dialog boxes-Front-end Q&A-php.cn

In recent years, with the continuous development of front-end technology, Vue has become the front-end framework chosen by more and more developers. Among them, the addition, deletion, modification and query of front-end data is one of the most basic functions in web applications. In Vue, how to add, delete, modify and check while popping up a dialog box? Next, this article will introduce you to how to add, delete, modify, and query data in Vue, and how to combine dialog boxes to enhance user interactivity.

1. Preparation

Before practicing Vue, we need to understand and master the following technologies:

Basic knowledge of Vue: including components and data Binding, methods, life cycle and other related content;
Element UI: a UI component library based on Vue2.0, providing a rich set of UI components, including tables, dialog boxes, drop-down boxes, etc.;
Webpack: A modern resource manager that can bundle multiple JavaScript files into one file to reduce the number of loads.

2. Implement add, delete, modify and query operations

Data initialization

In Vue, we use the data option to define data. First define a data object in the Vue instance and add variables for storing data in it. Take a simple table as an example, as follows:

<template>
  <div>
    <el-table :data="tableData">
      ...
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

Copy after login

Implementing the operation of adding data

The implementation of adding data in Vue requires the use of the v-model instruction. This instruction The function is to two-way bind the form elements and the data of the Vue instance. When the value of the form changes, the corresponding data will also be updated. For example, if we add a piece of data to the table, we can do it through the following code:

<el-form>
  <el-form-item label="Name">
    <el-input v-model="name"></el-input>
  </el-form-item>
  <el-form-item label="Age">
    <el-input v-model="age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="addData">Add Data</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        tableData: [],
        name: '',
        age: ''
      }
    },
    methods: {
      addData() {
        this.tableData.push({name: this.name, age: this.age})
        this.name = ''
        this.age = ''
      }
    }
  }
</script>

Copy after login

Realizing the deletion of data operation

The deletion of data operation in Vue is very common Operation, delete by clicking a button or link. In Vue, you can use the v-for instruction to iterate table data and call the corresponding delete function through events. The following is the code implementation for deleting data:

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button type="danger" @click="deleteData(scope.$index)">Delete</el-button>
    </template>
  </el-table-column>
</el-table>

<script>
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods: {
      deleteData(index) {
        this.tableData.splice(index, 1)
      }
    }
  }
</script>

Copy after login

Implementing the editing data operation

In Vue, the editing data operation needs to be divided into two steps: First, edit the data The data is displayed in the form, and the second is to submit the modified data to the server. You can display the edited data in the form through the v-model instruction, and then submit the modified data by submitting the form. The following is the code implementation for editing data:

<el-table :data="tableData">
  <el-table-column label="Name">
    <template slot-scope="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="Age">
    <template slot-scope="scope">{{ scope.row.age }}</template>
  </el-table-column>
  <el-table-column label="Actions">
    <template slot-scope="scope">
      <el-button @click="editData(scope.row)">Edit</el-button>
    </template>
  </el-table-column>
</el-table>

<el-dialog :visible.sync="dialogVisible">
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        const index = this.tableData.indexOf(this.editRow)
        Object.assign(this.tableData[index], this.editRow)
        this.dialogVisible = false
      }
    }
  }
</script>

Copy after login

3. Combining dialog boxes to achieve interactive effects

The Element UI component library in Vue provides a wealth of components, including dialog components, which It is very convenient to achieve the effect of pop-up dialog box. In Vue, the implementation of the dialog component requires the introduction of the Element UI component library. The following is the code implementation of the dialog component:

<el-dialog :visible.sync="dialogVisible">
  <span slot="title">Edit Data</span>
  <el-form>
    <el-form-item label="Name">
      <el-input v-model="editRow.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="editRow.age"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="updateData">OK</el-button>
  </span>
</el-dialog>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        editRow: {}
      }
    },
    methods: {
      editData(row) {
        this.dialogVisible = true
        this.editRow = Object.assign({}, row)
      },
      updateData() {
        ...
        this.dialogVisible = false
      }
    }
  }
</script>

Copy after login

IV. Conclusion

This article mainly introduces the implementation of adding elements in Vue Methods for basic functions such as deletion, modification, and query are combined with dialog components to achieve the effect of enhancing user interactivity. It should be noted that in actual development, we need to make corresponding modifications and improvements according to needs. During use, we must pay attention to code efficiency and readability, as well as the separation of code and HTML and other related issues.

The above is the detailed content of How to implement addition, deletion, modification and query of data in Vue and combine it with dialog boxes. For more information, please follow other related articles on the PHP Chinese website!