溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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"
>重跑
</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函數加載完之后執行某個函數的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
