最近用select2做一个下拉多选,若只是从后端获取一个列表渲染还好说,没有任何问题。但要用select2对数据初始化时进行selected的默认选项进行显示,就出现问题了。

  

vm.$set('areas', data.data);
areaIdsSelect2();
areaIdsSelect2Change();

  区域没有显示出默认的selected。此时做一个定时器,

  

vm.$set('areas', data.data);
setTimeout(function () {
      areaIdsSelect2();
      areaIdsSelect2Change();
},1);

  

  一个1毫秒的延时,就正常工作了。对这个问题分析了很长时间,没有找到答案。现在感觉需要对线程机制和数据绑定进行深入,这方面需要研究Vuejs源码,现在没条件做这项工作,这个问题先记下来,以后研究。

  有了新发现,在HTML页面,绑定v-model对插件的工作有影响,某些情况下不用做延时也可以正常工作。

Vue.js线程机制问题还是数据双向绑定有延迟的问题的更多相关文章

  1. vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据

    vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...

  2. Vue学习笔记六:v-model 数据双向绑定

    目录 v-model简介和适用范围 新建HTML 所见即所得 v-model模拟简易计算器 v-model简介和适用范围 Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令, ...

  3. Vue源码学习(一)———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

  4. vue 利用v-model实现父子组件数据双向绑定

    v-model父组件写法: v-model子组件写法: 子组件export default中的model:{}里面两个值,prop代表着我要和props的那个变量相对应,event表示着事件,我触发事 ...

  5. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  6. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  7. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  8. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. 机器学习利器——Scikit-learn的安装

    由于笔者最近在进行毕业论文的准备,且毕业论文中需要用到Python版本的机器学习库——scikit-learn.所以最近三天一直在Windows上部署这个框架,终于部署成功了... 首先打开加州大学底 ...

  2. 安装和配置Mantis<项目管理工具>

    说明: 黑色加粗部分为配置文档修改或添加的内容,例如index.cgi意思为修改或添加index.cgi 红色加粗部分为操作控制而非直接输入,例如空格意思为此处需要按下空格键 一.介绍 Apache: ...

  3. SQL事物隔离级别

    标准SQL定义了4个隔离级别 Read uncommitted 未提交读 Read committed 已提交读 Repeatable read 可重复读 Serializable 可序列化 基本语法 ...

  4. http协议性能相关的技术要点

    1.http协议介绍 HTTP是一种请求/响应式的协议,基于TCP协议来进行数据传输. HTTPS是HTTP协议和安全套借口层(SSL)的结合,即安全增强版的HTTP. HTTP请求由三部分组成:请求 ...

  5. python数据挖掘领域工具包

    原文:http://qxde01.blog.163.com/blog/static/67335744201368101922991/ Python在科学计算领域,有两个重要的扩展模块:Numpy和Sc ...

  6. 转载:JProfiler远程监控LINUX上的Tomcat过程细讲

    来源于xuwanbest的博客   所谓"工欲善其事,必先利其器",好的工具确能起到事半工倍的作用.我用到的最多的就两个JConsole 和JProfiler .JConsole监 ...

  7. mentohust 你让我如何说你是好呢?

    最近换了ubuntu系统结果热了不少的麻烦,  借此机会唠叨一下, 首先是你这个ubuntu16.4 你这个bug 太让人郁闷了吧,或许主要是应该怪我菜,装个看家的软件eclipse.还热除了一堆的麻 ...

  8. [Xpand] Error 1 Invalid option '6' for /langversion; must be ISO-1, ISO-2, 3, 4, 5 or Default

    原因是用的vs2015 默认用了c#6 ,但是在没安装.net 4.6 环境下编译失败. 解决办法很简单,修改 6 为 5 做降级就可以了. 1.nuget install DotNetCompile ...

  9. Android 抗锯齿的两种方法

    Android 抗锯齿的两种方法 (其一:paint.setAntiAlias(ture);paint.setBitmapFilter(true))   在Android中,目前,我知道有两种出现锯齿 ...

  10. oracle表空间不足时的处理方法

    由于数据文件路径下的空间不足或表空间不足时,需要更换或扩展或新增表空间时,以下简单介绍下几种处理方式(数据文件/opt/oracle/oradata/testdb.dbf,原大小为100M) 一.扩大 ...