Vue.js實現ready函數加載完之后執行某個函數的方法

發布于 2020-7-10|

復制鏈接

摘記: vue.js 教程Vue.js(讀音 /vju?/, 類似于 view) 是一套構建用戶界面的漸進式框架。

Vue 只關注視圖層， 采用自底向上增量開發的設計。

Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

我期望vue中tds全都渲染在界面上之后，再調用一個函數(其實這個函數主要作用是給表格中的選擇框加監聽，如果tds沒有渲染，那監聽也加不上去)。

```javascript

..

vue.js 教程Vue.js(讀音 /vju?/, 類似于 view) 是一套構建用戶界面的漸進式框架。Vue 只關注視圖層， 采用自底向上增量開發的設計。

Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

我期望vue中tds全都渲染在界面上之后，再調用一個函數(其實這個函數主要作用是給表格中的選擇框加監聽，如果tds沒有渲染，那監聽也加不上去)。

```javascript

日期

任務

是否執行

執行結果

影響行數

執行時間

執行時長

成功率

操作

{{td.date}}

{{td.job}}

{{td.is_done==0?'未執行':'已執行'}}

{{td.is_success==0?'成功':(td.is_success==1?'失敗':'')}}

{{td.nums}}

{{td.begintime}}

{{td.usedtime}}

{{td.rate}}

重跑

```

嘗試了

```javascript

Vue.nextTick(function () {

alert('new message'); // true

})

```

無效，在tds未展示在界面上時就alert了。嘗試了

```javascript

vm.$nextTick(function () {

alert('new message'); // true

})

```

也無效，在tds未展示在界面上時就alert了。最后解決辦法是增加一個vm.$watch('tds',function(val){ })函數，在vm改變后調用nextTick，最終可以在tds展示在界面之后調用我想要的函數。

```javascript

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('重跑中');

// $.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();

});

})

```

總結

以上是生活随笔為你收集整理的vue组件加载完成之后执行方法_Vue.js实现ready函数加载完之后执行某个函数的方法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。