How to delete data in an array in vue.js

Vue.js method of deleting data in an array: First introduce the [vue.JS] file and add a vue container; then instantiate the vue object in the tag, save the code and preview the effect directly in the browser; Finally click the delete button.

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

vue.js method to delete data in an array:

The first step is to introduce the vue.JS file into the created html5 page code and add a vue container, including an unordered list and two buttons, as shown in the following figure:

The second step, in the <script></script> tag, instantiate the vue object, call el and data, and assign a value to the message, as shown in the following figure:

The third step is to save the code and preview the effect directly in the browser. You can see the unordered list, delete button and add button, as shown in the figure below:

The fourth step, in the methods method, add delData and addData click functions, call Vue.delete() and Vue.set() respectively, as shown in the following figure:

The fifth step, save the code again and run it, click the delete button and find that the record cannot be deleted; modify the Vue.delete code, as shown below:

The sixth step, the second parameter in the delete method is the index of the array, not the key or value of the element. You can delete it by running it again, as shown in the figure below:

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to delete data in an array in vue.js. For more information, please follow other related articles on the PHP Chinese website!