精华内容
下载资源
问答
  • 下面小编就为大家分享一篇vue.js中$set与数组更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本文将详细介绍Vue数组更新及过滤排序 变异方法  Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法 push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度 pop() 从...
  • 详解VUE 数组更新

    2020-08-28 12:37:50
    主要介绍了VUE 数组更新问题,文中给大家介绍了vue如何监听数据的变化的 ,需要的朋友可以参考下
  • mongodb 数组更新

    2020-03-26 21:40:44
    原因:线上数据中,数组项某个value存在前置空格 # 数据格式如下(手动输入的,json串格式可能有问题): { "categoryId":99999, "categoryType":23, "keyValue":[ {"key":"key1","value":" value1"}, {"key":"key2",...

    原因:线上数据中,数组项某个value存在前置空格

    # 数据格式如下(手动输入的,json串格式可能有问题):
    {
    "categoryId":99999,
    "categoryType":23,
    "keyValue":[
    	{"key":"key1","value":" value1"},
    	{"key":"key2","value":"value2"},
    	{"key":"key3","value":"value3"},
    	{"key":"key4","value":"value4"}
    ]
    }
    # 存在空格的数据为 key="key1"
    

    导致原因

    	用户在提交时不小心加了个空格(可能是复制粘贴的),程序也没有对这部分做处理;
    	本来可以从后台管理系统修改,但是咨询产品,这部分修改貌似有问题,但记不清楚了(才维护的项目,流量巨大-类目项目)
    	根据目前看来只能采取走SQL的方式更新
    

    问题分析

    	1、通过代码找到使用的mongodb查询语句类似于
    	mongodb.query("categoryId").is(categoryId).and("categoryType").is(23);
    	
    	使用命令查询语句为
    	db.getCollection('category***').find({"categoryId":9999,"categoryType":23})
    	返回结果如文章开头所示
    
    	2、最开始想直接通过update更新,前提是query查询条件为,仅仅查询需要更新这个数组的key和value
    	3、但网上找这种命令,没有类似的。数组中只有一个属性的倒是一堆攻略,对应尝试写的命令就不公布了(主要是没有记录下来)
    	4、考虑到使用先删除当前数据,然后使用插入(居然没有想到只更新数组部分)。没有这样做的原因:
    		1) 这个项目调用量巨大
    		2) 而且项目启动后,做了大量缓存(处理时不知道),涉及到mongodb为实时(不清楚直接删除,会对缓存更新是否及时)
    		3) 关键是要的急,接手后一直未修改项目内容
    		4) 通过类目ID调用这个流量具体有多少
    		5) 可能是因为调用量大吧,大部分接口返回数据多,没有记录入参和出参
    	5、后来想到个折中的办法
    		1) 线上通过mongodb工具可以查看数据(貌似可以申请修改数据权限,那这个问题解决就是几秒钟的事)
    		2) 询问dba,能否通过这种方式修改,前提还是要走jira(项目管理功能句)
    		3) dba回答是NO,通过update更新
    	6、结果又转回来了   😓
    		无意间问起同事,之前处理过类似问题没,结果告诉我来公司没有用过mongodb。但是他说可能通过把现有数组所有数据放到修改项中,这样应该可以了修改吧。
    		觉得他说的有道理,就在测试环境测试一番,结果可行
    

    最终解决方案

    	# remove
    	db.getCollection('category***').remove({"categoryId":9999})
    
    	# find
    	db.getCollection('category***').find({"categoryId":9999})
    
    	# insert
    	db.getCollection('category***').insert({"categoryId":9999,"categoryType":23,"keyValue":[{"key":"key1","value":" value1"},{"key":"key2","value":"value2"},{"key":"key3","value":"value3"}]})
    
    	# update
    	db.getCollection('category***').update({"categoryId":9999},{$set:{"keyValue":[{"key":"key1","value":"value1"},{"key":"key2","value":"value2"},{"key":"key3","value":"value3"}]}})
    
    	# 就是通过上面4条语句来回测试即可 会存在将线上数据考下来格式问题,通过类似于notePad++之类的文本编辑工具替换即可,相信大家都会
    	# 你懂的  问题就是这样解决的  好开森,可以去洗澡了
    
    展开全文
  • vue之数组更新检测

    2020-03-04 16:56:19
    首先得明白,JS操作数组有...数组更新检测 变异方法 顾名思义,变异的单词为mutation,也有改变之意,即会修改原数组,但不会返回新的。有以下方法 push() pop() shift() unshift() splice() sort() reverse()...

    首先得明白,JS操作数组有一些是改变原数组的,有一些则是生成一个新数组。那么vue又是响应式的,所以就会想是不是操作数组就可以改变视图。

    以下参考官方文档

    数组更新检测

    变异方法

    顾名思义,变异的单词为mutation,也有改变之意,即会修改原数组,但不会返回新的。有以下方法

    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()

    替换数组

    既然有mutation,肯定也会有非mutation。即在原数组的基础上生成一个新的数组返回

    • concat() 用于连接两个或多个数组
    • filter() 过滤的意思,函数会将数组每一项都处理一遍,返回符合条件的值

    这里需要说明,some和every都是条件过滤,它俩与filter的区别在于filter返回的是新数组,而some和every都是返回boolean值

    • slice() 从已有的数组中返回选定的元素
    //slice ( begin , end )     两个参数,都是元素下标,但是要注意,begin包含begin,end为end-1
    //example:
    const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
    console.log(animals.slice(1,4))  // ["bison", "camel", "duck"]   1选中了bison,4选中了elephant
    

    关于直接调用索引修改数组的方式

    通过索引去修改数组,页面并不会响应,但是在控制台中可以看到其实fruits已经发生了变化。

    <body>
        <div id="app">
            <p @click="change">{{fruits}}</p>
        </div>
    
        <script>
            
            let vm=new Vue({
                el:"#app",
                data:{
                    fruits:["a","b","c"]
                },
                methods:{
                    change:function(){
                        //想要修改b为d
                        this.fruits[1]="d"
                    }
                }
            })
        </script>
    </script>
    </body>
    

    那么vue中该如何通过索引操作数组使得页面变得响应呢?只需要将methods修改为如下:

    methods:{
                    change:function(){
                        //想要修改b为d
                        //vue提供了一个全局方法叫Vue.set(vm.数组名,想要修改的下标,新的值)
                        //即Vue.set(vm.array,indexOfItem,newValue)
                        // 但是同时,vue还提供了去哪句方法的实例写法,如下
                        // vm.$set为Vue.set的别名
                        vm.$set(vm.fruits,1,"d")
                    }
                }
    

    关于修改数组长度的问题

    可以直接使用splice方法。具体用法已经了然,不再赘述。
    还是使用上面的代码

    vm.fruits.splice(1,2) // 会只剩下一个a,意思是从下标为1的元素开始删除两个。
    
    展开全文
  • 最近面试和平时工作中,改变了数组内的值,但是页面没有重新渲染,今天记录下解决方法 直接修改不生效,代码如下 <template> <div> <h2>数组展示:{{testArr}}</h2> <button @click...

    最近面试问道和平时工作中用到:改变了数组内的值,但是页面没有重新渲染,今天记录下解决方法

    直接修改不生效,代码如下

    <template>
    	<div>
    		<h2>数组展示:{{testArr}}</h2>
    		<button @click="changeArr">修改数组</button>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: "fun",
    		data: function() {
    			return {
    				testArr:["a","b","c","d"]
    			}
    		},
    		methods: {
    			changeArr(){
    			    // 这样直接修改数组是没用的,页面不会重新渲染
    				this.testArr[1] = "w"
    				console.log(this.testArr)
    			}
    		}
    	}
    </script>
    

    在这里插入图片描述

    第一种方法:Vue.set

    changeArr(){
    	// 这样直接修改数组是没用的,页面不会重新渲染
    	this.testArr[1] = "w";
    
    	//第一种方法: 用set来更新数据
    	this.$set(this.testArr, 1, "Q")
    	console.log(this.testArr)
    }
    

    在这里插入图片描述

    该方法也能给对象新增属性,并更新试图:
    给obj对象新增"newAttr"属性,并赋值为"hello world";
    this.$set(this.obj, ‘newAttr’, ‘hello world’)

    第二种方法:数组splice方法

    changeArr(){
    	// 第二种方法 splice
    	this.testArr.splice(1, 1, "R")
    	console.log(this.testArr)
    }
    

    在这里插入图片描述

    第三种方法:this.$forceUpdate()强制刷新

    changeArr(){
    	// 第三种方法: this.$forceUpdate()强制刷新
    	this.testArr[1] = "G"
    	this.$forceUpdate();
    	console.log(this.testArr)
    }
    

    在这里插入图片描述

    第四种方法:es6 "…"扩展运算符

    changeArr(){
    	// 第四种方法: es6 "..."扩展运算符
    	this.testArr[1] = "Y"
    	this.testArr = [...this.testArr]
    	console.log(this.testArr)
    }
    

    在这里插入图片描述

    展开全文
  • Vue的数组更新

    千次阅读 2019-04-01 15:51:21
    Vue 本身也提供了很多观察数组变异的方法,使用它们改变数组也会触发视图更新。之前查阅资料用 Vue 实现一个脱离后端简单实现增删改查的代码,就以此举例吧。 <body> <div id="app"> <div id=...

    对数组进行操作,在开发中也是比较常用的。Vue 本身也提供了很多观察数组变异的方法,使用它们改变数组也会触发视图更新。之前查阅资料用 Vue 实现一个脱离后端简单实现增删改查的代码,就以此举例吧。

    <body>
    		<div id="app">
    			<div id="body">
    				<div id="title">
    					<h3 id="titleFont">添加商品</h3>
    				</div>
    				<div id="text">
    					<label>
                         商品码:
              <input type="text" class="text-control" v-model="id">
            </label>
    					<label>
                         商品名:
              <input type="text" class="text-control" v-model="name">
            </label>
    					<label>
                         价格:
              <input type="text" class="text-control" v-model="price">
            </label>
    					<input type="button" value="添加" class="btn-style" @click="add()">
    					<input type="button" value="确认" class="btn-style" @click="save(item)">
    					<label style="margin-left: 35px;">
              	搜索名称关键字:
              <input type="text" class="text-control" v-model="keywords">
            </label>
    				</div>
    			</div>
    
    			<table class="table-style">
    				<thead>
    					<tr>
    						<th>商品码</th>
    						<th>商品名</th>
    						<th>价格</th>
    						<th>入库时间</th>
    						<th>操作</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr v-for="item in search(keywords)" :key="item.id">
    						<td v-text="item.id"></td>
    						<td v-text="item.name"></td>
    						<td v-text="item.price"></td>
    						<td v-text="item.intime"></td>
    						<td>
    							<a href="#" @click.prevent="Edit(item)">编辑</a>
    							<a href="#" @click.prevent="del(item.id)">删除</a>
    						</td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    
    		<script>
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					id: '',
    					name: '',
    					price: '',
    					keywords: '',
    					list: [{
    							id: 1,
    							name: '香飘飘',
    							price: '5元',
    							intime: new Date()
    						},
    						{
    							id: 2,
    							name: '优乐美',
    							price: '4元',
    							intime: new Date()
    						},
    						{
    							id: 3,
    							name: '康师傅',
    							price: '5元',
    							intime: new Date()
    						}
    					]
    				},
    				methods: {
    					add() {
    						var good = {
    							id: this.id,
    							name: this.name,
    							price: this.price,
    							intime: new Date()
    						}
    						this.list.push(good)
    						this.id = this.name = this.price = ''
    					},
    					del(id) {
    						var index = this.list.findIndex(list => {
    							if(list.id == id) {
    								return true
    							}
    						})
    						this.list.splice(index,1)	
    					},
    					search(keywords) {
    						return this.list.filter(item => {
    							if(item.name.includes(keywords)) {
    								return item
    							}
    						})
    					},
                	    Edit(item) {
                	    	this.id = item.id,
                	    	this.name = item.name,
                	    	this.price = item.price
                	    },
                	    save(){
                	    	var good = {
    							id: this.id,
    							name: this.name,
    							price: this.price,
    							intime: new Date()
    						}
                	    	this.list.splice(this.id-1,1,good)
                	    	this.id = this.name = this.price = ''
                	    }
    				}
    			})
    		</script>
    	</body>
    

    运行截图如下:
    在这里插入图片描述

    • 这里用到 push() 方法用来作为数据的增加,输入框的数据经过 v-model 双向绑定,当输入的数据发生改变时,data 中的数据也会发生改变,点击添加按钮调用 add() 函数。然后将 data 中的数据赋给 good ,此时对 good 进行操作。push() 和我们学数据结构用到的push 很相似,这里也可以简单的理解成进栈的操作。this.list.push(good) 将 good 的数据存入 list 中( this 指的是 data )。这样增加的功能就实现了。
    • 删除的功能用到 splice() 方法,splice() 方法通过删除或替换现有元素来修改数组,并以数组形式返回被修改的内容。splice()的形势大概如下:
      array.splice(start[, deleteCount[, item1[, item2[, …]]]])
      start​:指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位(从-1计数);如果负数的绝对值大于数组的长度,则表示开始位置为第0位。
      deleteCount: 可选。
      整数,表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。
      item1, item2, …: 可选
      要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。
      由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。
    • 查的方法使用的是 filter() 方法,includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 并且 filter() 方法不改变原数组。
    展开全文
  • 原文转载自:https://blog.csdn.net/m0_37747665/article/details/82148966 在Vue的官方文档有提到这样一个注意事项: 由于 JavaScript 的限制,Vue 不能检测以下变动的数组:1)当你利用索引直接设...
  • 业务场景 遍历数组,渲染页面,用户可以对食物类型与分量进行更改。实则就是对数组中对象的属性进行更改。然后在页面中及时渲染出来。 错误做法 直接对数据元素进行更改,伪...// 直接更新数组某个元素的属性,视图上
  • 解决Vue数组更新不渲染的问题

    千次阅读 2019-01-06 17:39:41
    当使用索引直接赋值和直接修改数组长度时,Vue不能检测出变动的数组。 这样写页面显示的是共0个 &lt;span class="pull-right"&gt;已全部加载,共{{fileDatas.length}} 个&lt;/span&gt; ...
  • Vue数组更新检测

    2019-08-20 19:28:24
    Vue数组更新检测变异方法 (mutation method)替换数组注意事项 变异方法 (mutation method)   Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括: push() pop() ...
  • this.hasSignTunnel[index]....this.hasSignTunnel[index].isSignLock /*更换数组中某项内容*/ // this.$set(this.hasSignTunnel[index], 'isSignLock', !this.hasSignTunnel[index].isSignLock) /*使用$s...
  • data里定义了一个数组arr,数组的元素可以是同样格式的数组arrChild(数组嵌套),如果只改变最外层的元素即arr的元素,视图可以更新,如果改变的是arrChild里边的数据(内层元素),视图不会自动更新。 比如有...
  • 1. vue数组更新界面无变化 1.1. 说明 对数组进行更新或者添加,一定要注意方式,我的情况是数组套数组,双重循环,在造数据的时候,不断从尾部添加数据,所以写成了如下形式,每次下拉都会去加载一批相同的数据添加...
  • Vue 包含一组观察数组的变异方法,它们将会触发视图更新 ​ push()添加在末尾一个元素,返回值是修改后数组的长度 ​ unshift添加在首未尾部,返回的是修改后的数组的长度 ​ pop()删除末尾的元素,返回值是删除的元素...
  • 先来个vue的知识点数组更新检测变异方法Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push()pop()shift()unshift()splice()sort()reverse()你打开控制台,然后用前面例子的 items ...
  • 【谨慎】Vue数组更新检测

    千次阅读 2018-03-19 10:57:23
    变异方法Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push()pop()shift()unshift()splice()sort()reverse()你打开控制台,然后用前面例子的 items 数组调用变异方法:example1....
  • 4 如果查询使用否定运算符(如$ne、$not或$nin)匹配数组,则不能使用位置运算符从该数组更新值。但是,如果查询的否定部分位于$elemMatch表达式中,则可以使用位置操作符更新该字段。 而如果我们要将其他符合条件的...
  • 1.v-for遍历循环对象与数组 ...2.vue数组更新检测变异方法举例 <template> <div class="jz"> <div> <h2>遍历数组</h2> <ul> <li style="font-si...
  • 数组变更检测注意事项: 由于 JavaScript 的限制,Vue不能检测以下数组的变动: 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = ...
  • 今天遍历后台的res.list,某种情况list...当你利用索引直接设置一个项时或者当你修改数组的长度时,vue都不会监测到数组的变化,但很奇怪的是,只有数组为空时我才遇到了这个问题。 现在改用此写法: res.data.list....
  • 表名:tb_test json字段:detailImgs 要取的json中的字段:value UPDATEtb_test aliasJOIN (  SELECT  id,  TRIM(BOTH '"' FROM Json_extract (detailImgs, "$[0].value") ) city,  TRIM(BOTH '"' FROM ...
  • vue中,经常要对数组进行一些操作,比如删除某个数据,添加一个数据等。拿下面的例子举例: <div id="app"> <ul> <li v-for="(item,index) in list" :key="item.id">{{item}}---{{index}}<...
  • 在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化。 (item,index) key=index>{{item.name}} data () { return { msg: 'Welcome to Your Vue.js App', todos: [{ name: ...
  • Vue数组更新检测无效

    千次阅读 2018-07-30 16:17:02
    Vue框架对数组的push、pop、shift、unshift、sort、splice、reverse方法进行了改造(变异方法),解决了调用这些函数改变数组后无法触发更新的问题。 由于 JavaScript 的限制(Observer),Vue 不能检测以下变动...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 661,408
精华内容 264,563
关键字:

数组更新