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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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执行速度全攻略(上)
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
初品cakephp 入门基础
2012/02/16 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
Python 单例设计模式用法实例分析
2019/09/23 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python 实现两个npy档案合并
2020/07/01 Python
Python执行时间的几种计算方法
2020/07/31 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
Linux的主要特性
2014/10/06 面试题
关于幼儿的自我评价
2013/12/18 职场文书
销售类求职信
2014/06/13 职场文书
临床医学专业求职信
2014/08/08 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
Python编程super应用场景及示例解析
2021/10/05 Python
Python实现数据的序列化操作详解
2022/07/07 Python