vuejs实现ready函数加载完之后执行某个函数的方法


Posted in Javascript onAugust 31, 2018

vue.js 教程

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

我期望vue中tds全都渲染在界面上之后,再调用一个函数(其实这个函数主要作用是给表格中的选择框加监听,如果tds没有渲染,那监听也加不上去)。

<div class="row" id="app">
  <div class="col-sm-12 col-md-12 main">
   <table class="table table-bordered table-striped">
    <thead>
    <tr>
     <th><input type="checkbox" id="checkAll" name="checkAll" /></th>
     <th>日期</th>
     <th>任务</th>
     <th>是否执行</th>
     <th>执行结果</th>
     <th>影响行数</th>
     <th>执行时间</th>
     <th>执行时长</th>
     <th>成功率</th>
     <th>操作</th>
    </tr>
    </thead>
    <tbody id="trs">
    <tr v-for="td in tds">
     <td><input type="checkbox" name="checkItem" /></td>
     <td>{{td.date}}</td>
     <td>{{td.job}}</td>
     <td>{{td.is_done==0?'未执行':'已执行'}}</td>
     <td>{{td.is_success==0?'成功':(td.is_success==1?'失败':'')}}</td>
     <td>{{td.nums}}</td>
     <td>{{td.begintime}}</td>
     <td>{{td.usedtime}}</td>
     <td>{{td.rate}}</td>
     <td v-if="td.is_done==0">
     </td>
     <td v-if="td.is_done==1">
      <button v-on:click="rerun($index,td.monitor_id)" type="button" class="btn btn-default btn-xs"
        style="padding:1px 10px;margin-top:-3px;margin-bottom:-2px;">重跑
      </button>
     </td>
    </tr>
    </tbody>
   </table>
  </div>
  <!--/.main -->
 </div>

尝试了

Vue.nextTick(function () {
 alert('new message'); // true
})

无效,在tds未展示在界面上时就alert了。

尝试了

vm.$nextTick(function () {
 alert('new message'); // true
})

也无效,在tds未展示在界面上时就alert了。

最后解决办法是增加一个vm.$watch('tds',function(val){ })函数,在vm改变后调用nextTick,最终可以在tds展示在界面之后调用我想要的函数。

var vm = new Vue({
  el: '#app',
  ready: function () {
   $.getJSON("/main/getMonitor", {"beginDate": getTheDate(-2), "endDate": getTheDate(0)}, function (result) {
    vm.$set('tds', result);
   });
  },
  data: {
   start: getTheDate(-2),
   end: getTheDate(0),
   isupdate: 0
  },
// computed: {
// // 一个计算属性的 getter
// tds: function () {
//  var myr="";
//  $.getJSON("/main/getMonitor", {"beginDate": getTheDate(-2),"endDate": getTheDate(0)}, function (result) {
//  myr= result;
//  });
//  return myr;
// }
// },
  methods: {
   rerun: function (index, monitor_id) {
    var button = $('#trs').children().eq(index).children().eq(9).children().eq(0);
    button.prop('disabled', true);
    button.html('重跑中<span class="dotting"></span>');
//    $.getJSON("http://m.o2.qq.com/Api/rerunMonitor", {"monitorID": monitor_id}, function (result) {
//     console.log(result);
//     vm.isupdate=(this.isupdate==0?1:0);
//     button.html('重跑');
//     button.prop('disabled', false);
//    });
    $.ajax({
     url: "http://m.o2.qq.com/Api/rerunMonitor",
     // The name of the callback parameter, as specified by the YQL service
     jsonp: "callback",
     // Tell jQuery we're expecting JSONP
     dataType: "jsonp",
     // Tell YQL what we want and that we want JSON
     data: {
      monitorID: monitor_id
     },
     // Work with the response
     success: function (response) {
      console.log(response); // server response
      vm.isupdate = (vm.isupdate == 0 ? 1 : 0);
      button.html('重跑');
      button.prop('disabled', false);
     }
    });
   }
  }
 })
 vm.$watch('start', function (val) {
  $.getJSON("/main/getMonitor", {"beginDate": val, "endDate": this.end}, function (result) {
   vm.tds = result;
  });
 })
 vm.$watch('end', function (val) {
  $.getJSON("/main/getMonitor", {"beginDate": this.start, "endDate": val}, function (result) {
   vm.tds = result;
  });
 })
 vm.$watch('isupdate', function (val) {
  $.getJSON("/main/getMonitor", {"beginDate": this.start, "endDate": this.end}, function (result) {
   vm.tds = result;
  });
 })
 vm.$watch('tds',function(val){
  vm.$nextTick(function() {
   initTableCheckbox();
  });
 })

总结

以上所述是小编给大家介绍的vuejs实现ready函数加载完之后执行某个函数的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
angular实现input输入监听的示例
Aug 31 #Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 #Javascript
Angular2中监听数据更新的方法
Aug 31 #Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 #Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 #Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 #Javascript
You might like
php源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python 自动化表单提交实例代码
2017/06/08 Python
python实现感知器算法详解
2017/12/19 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书