027：vue中两列表数据联动，购物车添加、删除和状态更改

查看专栏目录: VUE ------ element UI

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

（1）提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等

（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox ，el-input，el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

需求背景

本示例是演示两个列表的互动的场景，模仿购物车添加、删除商品的状态. 如果商品添加到购物车上，则显示已加入购物车，否则显示未加入购物车； 购物车中的商品，可以删除，同时更改商品列表的状态。 本文用到了array的改写，添加，删除等方法。

示例效果

示例源代码（共135行）

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-09-06
*/

<template>
	<div class="container">
		<div class="top">
			<h3>商品列表与购物车列表，数据联动 </h3>
			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
		</div>

		<h5>商品列表</h5>
		<div class="oneLine" v-for="(item,index) in productList" :key="index">
			<div class="fl20"><img :src="item.thumbnail_pic_s" alt=""></div>
			<div class="fl20">{{item.title}} </div>
			<div class="fr20">
				<el-link type="danger" v-show="!item.cart" @click="addCart(index)">未加入购物车</el-link>
				<el-link type="default" v-show="item.cart" @click="removeCart(index,item.title)">已加入购物车</el-link>
			</div>
		</div>


		<h5>购物车列表</h5>
		<div v-for="(item,index) in cartList" :key="item.index" class="oneLine">
			<div class="fl20"><img :src="item.thumbnail_pic_s" alt=""></div>
			<div class="fl20">{{item.title}} </div>
			<div class="fr20">
				<el-link type="danger" @click='delItem(index,item.title)'> 删除</el-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [],
				productList: []
			}
		},
		methods: {
			getdata() {
				let url = "/listdata"
				this.$request(url, {}, "GET")
					.then((res) => {
						this.productList = res.data.data
					})
			},

			updateData() {
				for (let i = 0; i < this.productList.length; i++) {
					if (this.cartList.length > 0) {
						let xx = this.productList[i].title;
						this.cartList.some(item => {
							if (item.title == xx) {
								this.$set(this.productList[i], "cart", true);
							}
						})
					}
				}
			},

			addCart(x) {
				console.log(this.productList[x])
				this.cartList.unshift(this.productList[x])
				this.updateData()
			},
			removeCart(x, y) {
				this.cartList = this.cartList.filter((item) => {
					return item.title != y
				})
				this.$set(this.productList[x], "cart", false);
			},
			delItem(i, d) {
				this.cartList.splice(i, 1);

				for (let i = 0; i < this.productList.length; i++) {
					if (this.productList[i].title == d) {
						this.$set(this.productList[i], "cart", false);
					}
				}

			},

		},
		mounted() {
			this.getdata();
		},
		updated() {
			this.updateData()
		},
	}
</script>
<style scoped>
	.container {
		width: 1000px;
		height: 580px;
		margin: 50px auto;
		border: 1px solid green;
	}

	.top {
		margin: 0 auto 30px;
		padding: 10px 0;
		background: #cddeef;
	}

	.oneLine {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #eee;
		margin-top: 10px;
		overflow: hidden;
		cursor: pointer;
		text-align: left;
	}

	.oneLine .fl20 {
		float: left;
		padding: 0 10px;
		min-width: 150px;
	}
	.oneLine .fr20 {
		float: right;
		min-width: 50px;
		padding-right: 15px;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

核心代码

updateData() {
				for (let i = 0; i < this.productList.length; i++) {
					if (this.cartList.length > 0) {
						let xx = this.productList[i].title;
						this.cartList.some(item => {
							if (item.title == xx) {
								this.$set(this.productList[i], "cart", true);
							}
						})
					}
				}
			},

			addCart(x) {
				console.log(this.productList[x])
				this.cartList.unshift(this.productList[x])
				this.updateData()
			},
			removeCart(x, y) {
				this.cartList = this.cartList.filter((item) => {
					return item.title != y
				})
				this.$set(this.productList[x], "cart", false);
			},
			delItem(i, d) {
				this.cartList.splice(i, 1);

				for (let i = 0; i < this.productList.length; i++) {
					if (this.productList[i].title == d) {
						this.$set(this.productList[i], "cart", false);
					}
				}

			},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35