我用Laravel、Vue和JQuery编写了一个小代码,效果很好.现在我想用Vue和Axios运行remove JQueryremove JQuery.

以下是我的模板:

 <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,没问题.

我困惑的是:How can I ensure 100 functionality with 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推荐的方法是使用mounted().

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

支票:https://vuejs.org/v2/api/#mounted

Vue.js相关问答推荐

Vuetify从同一方向旋转传送带下一个项目和上一个项目

如何解决 importers[path] is not a function for clean Vue 3/Vite/Storybook installation

如何在 Nuxt3 中使用 nuxtjs/auth-next 模块?

webpack vue-loader 配置

Vue子组件等待props

如何在 vue 组件之外访问$apollo?

将props传递给设置时的VueJS 3组合API和TypeScript类型问题:类型上不存在属性 user用户

从组件的 内的组件调用方法

在 vue.js 中获取当前时间和日期

事件 click点击的无效处理程序:未定义

如何在 VUE 应用中使用 sass?

从 Axios 响应中解析 XML,推送到 Vue 数据数组

npm run dev 和 npm run production 的区别

我可以使用react路由创建别名路由吗?

如何将props传递给组件的故事?

使用 vuex-persistedstate 仅使一个模块持久化

如何将单选按钮绑定到 vuex store ?

Vue.js 显示空格(换行符)

在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里?

使用 vue.js 获取调用元素