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 相关文章推荐
豆瓣网的jquery代码实例
Jun 15 Javascript
JQUERY操作JSON实例代码
Feb 09 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
在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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
js获取url中指定参数值的示例代码
2013/12/14 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
selenium自动化测试入门实战
2020/12/21 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
高中班级口号
2014/06/09 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
小学四年级作文之写景
2019/08/23 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript