преобразовать динамическую функцию Ajax Div JQuery в Vue.js

Question

У меня есть следующее:

html:

<div data-ajaxdiv="sidebar__blog"></div> 
<div data-ajaxdiv="content__blog_posts"></div> 

и т.д ...

jquery:

window.onload = gatherajaxdivs;

function ajaxdiv(element){  
    $.ajax({
        type: 'post',
        data: {
            action: 'ajaxdiv',
            subaction: element.attr('data-ajaxdiv')
        },
        success: function (data) {
            element.html(data);
        }
    });
}

function gatherajaxdivs(){
    $('[data-ajaxdiv]').each(function(){
        ajaxdiv($(this));
    }); 
}

Возвращает данные Ajaxдинамический HTML-код из моей базы данных для элементов.Это работает отлично, но сейчас я изучаю vue, и постепенно я конвертирую свой старый jquery в новый код vue.

Я часами искал в интернете учебники / блоги, как создать эту простую функцию в vue, но я не могу найти то, что я ищу.Может кто-нибудь помочь мне начать с простого примера?

Answer 1

Vue не поставляется с функциональностью AJAX.Вы можете выполнять вызовы AJAX, используя встроенный в JavaScript объект XMLHttpRequest:

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

Или вы можете использовать библиотеку, которая имеет более простой API и встроенные обещания, такие как Axios:

https://github.com/axios/axios

Это бесплатное руководство может помочь вам с Axios:

https://laracasts.com/series/learn-vue-2-step-by-step/episodes/18