我用 Laravel、Vue 和 JQuery 编写了一段小代码,运行良好。现在我想删除 JQuery 并使用 Vue 和 Axios 运行所有内容。
这是我的模板:
<ul id="product_list" class="vue-list-wrapper list-wrapper" data-rest="{{ route('rest_get_products', ["id"=>$product_type_id]) }}" data-pagination="0">
<li v-for="item in items">
<div class="item-name item-section">@{{ item.name }}</div>
...bla bla...
</li>
</ul>
以下代码实际上有效,我可以渲染从 AJAX 获得的内容。我知道如何应用axios,没问题。
我感到困惑的一点是:如何确保 Vue 的 $(document).ready(
功能?
(function(){
"use strict";
function init_vue_list(){
var vue_list_handler = new Vue({
el: '.vue-list-wrapper',
data: {
items: []
},
mounted: function (event) {
var self = this;
var ajax_url = this.$el.getAttribute('data-rest');
$.ajax({ // No problem to convert this to Axios.
url: ajax_url,
method: 'GET',
success: function (data) {
self.items = data;
},
error: function (error) {
console.log(error);
}
});
},
methods:{
open_production:function(event){
}
}
});
}
$(document).ready( // I'm confused how I can replace this with Vue.
function(){
if($('.vue-list-wrapper').length > 0) {
init_vue_list();
}
}
);
})(document, $);
最佳答案
vue 推荐的方法是使用 mounted()。
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
关于javascript - Vue.js 中的类似 $(document).ready( 的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59957400/