How to delete array elements in vue.js

Vue.js method of deleting array elements: 1. Get the subscript of the element to be deleted in the array; 2. Calculate from the subscript and delete elements with length.

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

Do you remember that there is a method arr.splice(arr.indexOf(ele),length). This method can help us delete any js array, which is very practical.

The arr.splice(arr.indexOf(ele),length) method means to first obtain the subscript of the element in the array, then calculate from this subscript, and delete the element with length.

Code example:

<template>
 <div class="users">
	<button type="button" class="btn btn-danger" v-on:click="deleteUser(user)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button>	
 </div>
</template>

<script>
//引入jquery

export default {

  data(){
		return {
			
			users:[
				{
					name:&#39;zx&#39;,
					age:18,
					addrress:&#39;江苏南京&#39;,
					email:&#39;1773203101@qq.com&#39;,
					contacted:false,
				},
				{
					name:&#39;zhiyi&#39;,
					age:19,
					addrress:&#39;中国北京&#39;,
					email:&#39;1773203101@qq.com&#39;,
					contacted:false,
				},
				{
					name:&#39;zhuxu&#39;,
					age:20,
					addrress:&#39;中国上海&#39;,
					email:&#39;1773203101@qq.com&#39;,
					contacted:false,
				},
			]
		}
	},
	methods:{
		deleteUser:function(user){
			//表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
			this.users.splice(this.users.indexOf(user),1);
		}
	}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--scope只会影响到当前组件的样式-->
<style scoped>
</style>

Recommended learning: php training

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