二：vue 数组和对象不能直接赋值情况和解决方法

Vue 不能检测以下变动的数组：第一：利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue第二：修改数组的长度时，例如：vm.items.length = newLength可以使用this.$set(this.arr,index,newVal)来解决Vue 不能检测对象属性的添加或删除：可以使用this.$set(this.object...

ivylingling123

3472人浏览 · 2018-12-10 16:07:15

ivylingling123 · 2018-12-10 16:07:15 发布

Vue 不能检测以下变动的数组：

第一：利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
第二：修改数组的长度时，例如：vm.items.length = newLength
可以使用this.$set(this.arr,index,newVal)来解决

Vue 不能检测对象属性的添加或删除：

可以使用this.$set(this.object,'key',value)

当需要添加多个对象时，Object.assign({},this.object,{key:value,key:value})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script type="text/javascript" src="vue.js"></script>

</head>
<body>
<div id="app-4">
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
		<thead>
		<tr>
			<th width="190">奖品名字</th>
			<th align="left">奖品值</th>
			<th align="center">奖品获得人</th>
			<th align="center">创建时间</th>
			<th align="center">奖品id</th>
		</tr>
		</thead>
		<tbody id="luckeyList"  v-for="(todo,index) in todos" >
		<tr><td align="center">{{ todo.name }}</td>
			<td>{{ todo.value }}</td>
			<td align="center">{{ todo.username }}</td>
			<td align="center">{{ todo.c_time }}</td>
			<td align="center">{{ todo.id }}</td>

		</tr>
		</tbody>
</table>
<p>第二个实验：vue 数组和对象不能直接赋值情况和解决方法</p>
    <p>不能实时监测列表的更新数据有以下几种情况</p>
	   第一种：使用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
	   第二种：修改数组的长度时，例如：vm.items.length = newLength
	   第三种：使用数组的.filter(),concat(),slice()不会更新数组，只会返回一个新的数组
	</p>
    <button  @click="addItemValueByIndex()">addItemValueByIndex</button>
	<button  @click="concatItem()">concatItem</button>
	<p>能实时监测列表数据更新</p>
	<p>第一种方法：使用数组的 push(),pop(),shift(),unshift(),splice(),sort(),reverse()等都会触发列表的实时更新,这样前端的变化太过频繁，很容易挂了</p>
	<p>第二种方法：为数组的某一项赋值 Vue.set(this.列表名, this.列表名.length, 列表项对象)也会实时更新，可以用改方法解决不会更新的
	<button  @click="pushItem()">pushItem</button>
	<button  @click="addItemBySet()">addItemBySet,会替换指定下标数据的显示,也可以在后面追加</button>
	
</div>
<script>
	var app4 = new Vue({
		el: '#app-4',
		data: {
			todos: [
				{"name":"ivy0","value":"1","id":"0","username":"A**nn","code":"score","c_time":"12-10 11:40:26"},
				{"name":"ivy1","value":"1","id":"1","username":"F**a3","code":"score","c_time":"12-10 11:37:45"},
				{"name":"ivy2","value":"1","id":"2","username":"F**a3","code":"reward_money","c_time":"12-10 11:37:33"},
				{"name":"ivy3","value":"1","id":"3","username":"默**","code":"reward_money","c_time":"12-10 11:32:38"},
				{"name":"ivy4","value":"1","id":"4","username":"默**","code":"score","c_time":"12-10 11:29:55"},
				{"name":"ivy5","value":"1","id":"5","username":"藤**03","code":"score","c_time":"12-10 11:15:09"}
			]
		},
			// 在 `methods` 对象中定义方法
			methods: {

				pushItem:function () {
					var p = {"name":"ivypush6","value":"1","id":"6","username":"藤**03","code":"score"}
					this.todos.push(p);
				}
				,
				concatItem:function () {
					var p = {"name":"ivyconcat7","value":"1","id":"7","username":"藤**03","code":"score"}
					this.todos.concat(p);
				},
				addItemBySet :function () {// 会把指定数组下标的值替换成新的值

					Vue.set(this.todos, this.todos.length, {
						"name": "addItemBySet",
						"value": "1",
						"id": "8",
						"username": "藤**03",
						"code": "score"
					})
				},
				addItemValueByIndex:function () {
				  var p = {"name": "addItemValueByIndex",
						"value": "1",
						"id": "9",
						"username": "藤**03",
						"code": "score"}
                    this.todos[this.todos.length]=p;
					alert('此时列表的长度变为'+this.todos.length+'但是数据并没有在页面上显示');
					
				}
				
				}
	
		//===========================
	})
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^