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 相关文章推荐
使用JavaScript动态设置样式实现代码(2)
Jan 25 Javascript
js转义字符介绍
Nov 05 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
原生js实现自定义难度的扫雷游戏
Jan 22 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 数组二分法查找函数代码
2010/02/16 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
更改Ubuntu默认python版本的两种方法python-> Anaconda
2016/12/18 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python实现简易数码时钟
2021/02/19 Python
Python简单实现区域生长方式
2020/01/16 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
python中xlutils库用法浅析
2020/12/29 Python
局域网标准
2016/09/10 面试题
车辆委托书范本
2014/10/05 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
离婚协议书格式范本
2016/03/18 职场文书
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang