Home>Article>Web Front-end> How to delete data in an array in vue.js

How to delete data in an array in vue.js

coldplay.xixi
coldplay.xixi Original
2020-11-11 10:04:29 6567browse

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.

How to delete data in an array in vue.js

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:

How to delete data in an array in vue.js

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

How to delete data in an array in vue.js

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:

How to delete data in an array in vue.js

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:

How to delete data in an array in vue.js

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:

How to delete data in an array in vue.js

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:

How to delete data in an array in vue.js

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn