Vue.js的核心学习笔记 - 侦听数组对象进行数据控制

简介

今天写Vue的时候遇到的一个问题，如何把指定对象数组下的指定数据产生变化后进行控制，再进行搜索引擎和查找资料后没有我想要的操作，于是解决完后写下这样一篇文章下来。

开始

关于Vue的侦听器后我会额外开展一章，没有侦听器基础的先可以看看百度或其他搜索引擎，也可以看看站内大佬写的文章，进行一个入门。

功能实现

在数组对象中的time发生改变后，通过alert提示修改的指定数组索引和相关time值。

代码示例

定义一个Vue的mydata数组

		var vue = new Vue({
			el: "#app",
			data: {
				mydata: [
				{ username: "马云成亚洲首富", time: "2018-10-19" },
				{ username: "雷军与董明珠的10忆赌约结局如何", time: "2016-10-11" },
				{ username: "米酒的饥饿营销成功捉住消费者", time: "2013-04-15" },
				{ username: "淘宝真假货不全", time: "2012-11-19" }]
			}

进行页面数据渲染

	<div id="app">
		<ul class="list" v-for="(data,index) in mydata">
			<li>
				<span>{{data.username}}</span>
				<span>{{data.time}}</span>
			</li>
		</ul>

	</div>

进行侦听

在侦听之前，我们需要一个修改的控件去进行数据修改。
在html中添加button元素。

	<button style="margin-top: 20px; margin-left: 20px;" @click="changeValue">修改</button>

准备工作完毕后，我们定义方法和侦听器

		var vue = new Vue({
			el: "#app",
			data: {
				times: "2019-03-20",
				mydata: [
				{ username: "马云成亚洲首富", time: "2018-10-19" },
				{ username: "雷军与董明珠的10忆赌约结局如何", time: "2016-10-11" },
				{ username: "米酒的饥饿营销成功捉住消费者", time: "2013-04-15" },
				{ username: "淘宝真假货不全", time: "2012-11-19" }]
			},
			methods: {
				changeValue: function (index) {
					this.mydata[1].time = "2019-03-20";
				}
			},
			watch: {
				// 检测mydata的time发生改变后所监听的控制
				mydata: {
					handler: function (newVal, oldVal) {
						var setTimes = "2019-03-20";
						var selectTime = "2016-10-11";
						var i = 0;
						// 数据更新后查询验证进行判断
						newVal.forEach((element, index) => {
							var times = element.time
							if (times == setTimes) {
								i = index;
								alert("监听mydata的第：" + i + "的time值监听更新为：" + element.time);
							}
						});
					},
					deep: true
				}
			}
		})

温馨提示

值得一提的是，进入深度侦听后，所需要实现的两个操作有

1. deep: true
2. handler

小结

由于我们是进行一个数组对象的一个监听，newVal以及oldVal的值都是一个数组对象，我们需要通过foreach遍历后再进行验证操作。

结束语

到这里我们的侦听数组对象进行数据控制的内容就告一段落，下一章更加精彩。

回到目录点我 序章