Tutorial
(Pronunciation /vjuː/, similar to view) is a progressive framework for building user interfaces.
Vue focuses only on view layers and adopts a design developed from bottom to up.
Vue's goal is to implement responsive data binding and combined view components with the simplest API possible.
I expect that after all tds in vue are rendered on the interface, a function will be called (in fact, this function mainly serves to add monitoring to the selection box in the table. If tds is not rendered, then the monitoring cannot be added).
<div class="row" >
<div class="col-sm-12 col-md-12 main">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th><input type="checkbox" name="checkAll" /></th>
<th>date</th>
<th>Task</th>
<th>Whether to execute</th>
<th>Execution results</th>
<th>Influence number of rows</th>
<th>Execution time</th>
<th>Execution time</th>
<th>Success rate</th>
<th>operate</th>
</tr>
</thead>
<tbody >
<tr v-for="td in tds">
<td><input type="checkbox" name="checkItem" /></td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{td.is_done==0?'Not executed':'Executed'}}</td>
<td>{{td.is_success==0?'success':(td.is_success==1?'fail':'')}}</td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</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;">Run again
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--/.main -->
</div>
Try it
(function () {
alert('new message'); // true
})
Invalid, alerted when tds is not displayed on the interface.
Try it
vm.$nextTick(function () {
alert('new message'); // true
})
It is also invalid, it alerts when tds is not displayed on the interface.
The final solution is to add onevm.$watch('tds',function(val){ })Function, call nextTick after vm changes, and finally call the function I want after tds is displayed.
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: {
// // A getter that calculates properties// 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);
('disabled', true);
('Run again<span class="dotting"></span>');
// $.getJSON("http://m./Api/rerunMonitor", {"monitorID": monitor_id}, function (result) {
// (result);
// =(==0?1:0);
// ('Run Run');// ('disabled', false);
// });
$.ajax({
url: "http://m./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) {
(response); // server response
= ( == 0 ? 1 : 0);
('Running');
('disabled', false);
}
});
}
}
})
vm.$watch('start', function (val) {
$.getJSON("/main/getMonitor", {"beginDate": val, "endDate": }, function (result) {
= result;
});
})
vm.$watch('end', function (val) {
$.getJSON("/main/getMonitor", {"beginDate": , "endDate": val}, function (result) {
= result;
});
})
vm.$watch('isupdate', function (val) {
$.getJSON("/main/getMonitor", {"beginDate": , "endDate": }, function (result) {
= result;
});
})
vm.$watch('tds',function(val){
vm.$nextTick(function() {
initTableCheckbox();
});
})
Summarize
The above is the method of executing a certain function after the vuejs implementation is loaded. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!