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>