vue.js移动数组位置,同时更新视图的方法


Posted in Javascript onMarch 08, 2018

使用vue.js v-for绑定若干个选项,需要对选项进行排序上下移动操作。

vue.js移动数组位置,同时更新视图的方法

需要对options里面数组的位置进行交换,通常是这样来写:

假设向前移动一个:

var index = this.options.indexOf(option); //获取当前选项对象在数组里面的索引。
var tempOption = this.options[index-1]; //存储前一个
this.options[index-1] = option;(this.options[index])
this.options[index] = tempOption;

这样的确改变了数组的顺序,但是视图却没有更新移动。详见vue官网数组的描述.

解决办法之一是改变他的对象,使用vue的set方法:

var index = options.indexOf(option); 
var tempOption = options[index - 1]; 
Vue.set(options, index - 1, options[index]); 
Vue.set(options, index, tempOption);

以上这篇vue.js移动数组位置,同时更新视图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
js控制table合并具体实现
Feb 20 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
使用Jquery实现每日签到功能
Apr 03 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
Vue实现双向数据绑定
May 03 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 #Javascript
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
vue.js中$set与数组更新方法
Mar 08 #Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 #Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 #Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 #Javascript
JavaScript满天星导航栏实现方法
Mar 08 #Javascript
You might like
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
php 团购折扣计算公式
2011/11/24 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
ES6正则表达式扩展笔记
2017/07/25 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python数组定义方法
2016/04/13 Python
python requests 使用快速入门
2017/08/31 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
天游软件面试
2013/11/23 面试题
担保书怎么写
2014/04/01 职场文书
生产文员岗位职责
2014/04/05 职场文书
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书
普通员工辞职信范文
2015/05/12 职场文书
厉行节约工作总结
2015/08/12 职场文书
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers