Static GitHub Issues

[1557] I use axios from the client side. How do I now use the data for my html (vue) page?

prev: template on client side
next: Rollup + Buble for Nuxt.js

I use axios from the client side. How do I now use the data for my html page? my client-side file scroll.js

var app = new Vue({
    el: '#preview-list',
    data: {
        goods: []
    }
});
$(function() {
    //import axios from 'axios';

    var imgs = app.goods;
    var prevScroll = 0,
        step = 1,
        requestAllowed = true, //запрос разрешен
        $pagination = $('.clear-both'),
        $list = $('#preview-list-items'),
        limit = 6,
        offset = 0,
        url ='https://jsonplaceholder.typicode.com/photos';
    loadData();
    console.log('2', imgs);


    //при скролле страницы
    $(window).scroll(function() {

        var scroll = $(window).scrollTop(),
            endOfProducts = $pagination.offset().top - $(window).height(), // величина конца продуктов
            direction = scroll > prevScroll, //направление?
            stepMap = step >= 0 && step <= 3; //кол-во подгрузок

        if (step == 3) {
            requestAllowed = false;
            $('#preview-buttons a').show();
        } else {
            $('#preview-buttons a').hide();
        }

        if (scroll > endOfProducts && requestAllowed && direction && stepMap) {
            loadData();
        }

        prevScroll = scroll;
    });

    $('#preview-show-more').click(function() {
        $(this).blur();
        step = 0;
        requestAllowed = true;
        $('#preview-buttons a').hide();
        loadData();
    });


    function loadData() {

        requestAllowed = false;
        axios.get(url)
            .then(function (response) {
                requestAllowed = true;
                var data = [];
                for (var i = 0, max = response.data.length; i < max; i++) {
                    imgs.push(response.data[i]);
                }
                imgs.length = limit;
                console.log('i', imgs);
                limit += limit;
                step++;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

and script on my vue page

<script>
    import FormLine from '~/components/formLine'
    import NuxtLink from "../.nuxt/components/nuxt-link";
    import axios from 'axios';
    export default {
        methods: {
            goToLink () {
                this.$router.push(
                    {
                        path: '/product/1',
                    }
                )
            }
        },
        head: {
            script: [
                { src: '/libs/jquery/jquery-1.11.1.min.js' },
                { src: '/libs/vue/vue.min.js' },
                { src: '/js/scroll.js' }
            ]
        },
        components: {NuxtLink,
            FormLine},
        name: 'GooodsGrid'  
}
</script>
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1388">#c1388</a>)</em></sub></div>