Функциональность, как $(документ).готов( с Vue.JS

Функциональность, как $(документ).готов( с Vue.JS

29.01.2020 12:36:54 Просмотров 40 Источник

Я написал небольшой код с 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. Я знаю, как применить Аксиос, без проблем. Дело в том, что я запутался: как я могу гарантировать $(документ).готов (функциональность с 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.JS / Functionality like $(document).ready( with Vue.js

Koustav Ray

29.01.2020 12:42:11

Рекомендуемый 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

https://stackoverflow.com/questions/59957400/functionality-like-document-ready-with-vue-js/59957468#comment106033814_59957468
Я уже смонтировал свой код, поэтому, скорее всего, вызов document ready здесь совершенно не нужен..
https://stackoverflow.com/questions/59957400/functionality-like-document-ready-with-vue-js/59957468#comment106033923_59957468
Кроме того, в использовании this.$nextTickвы гарантируете, что все представление также было отрисовано. Попробуй это сделать!
Закрыть X