javascript - 像 $(document).ready( 和 Vue.js 一样的功能
问题描述
我用 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,没问题。
我感到困惑的一点是:如何确保$(document).ready(
Vue 的功能?
(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 推荐的方法是使用mount()。
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
推荐阅读
- c# - Log4Net LogImpl 的实例太多
- javascript - 如果设置了 cookie,则嵌入谷歌分析
- typescript - 如何在 express 上使用共享的 firestore 实例?
- jenkins - 在管道步骤之间传递值/数据
- django-allauth - 使用 django-allauth 注册后阻止用户登录
- mysql - MySQL:删除约束唯一键
- php - 错误 500,与 php 建立 MYSQL 连接
- c# - Outlook 运行时不会加载 VSTO Outlook 加载项
- javascript - 如何在 Web 中添加 PowerPoint 演示文稿
- c# - 尝试在 WPF 中更改 HEX 值时出现问题