Здесь я использую vue.js 2.5 с внешней библиотекой jquery https://github.com/Pixabay/jQuery-flexImages. Мой бэкэнд - Laravel 5.7.
В своем ответе я получаю точно такой же html, как в первом демо отсюда
https://goodies.pixabay.com/jquery/flex-images/demo.html
Я попробовал это без vue.js, и все было хорошо, так что, вероятно, это проблема с vue.js.
Photos.vue
<template>
<div id="demo1" class="flex-images">
<div class="item" v-for="wallpaper in wallpapers" :data-w="wallpaper.width*(250/wallpaper.height)" :data-h="250">
<img :src="'/storage/thumbnails/'+wallpaper.thumbnail" alt="Responsive image">
</div>
</div>
</template>
<script>
import '../../../public/js/jquery.flex-images.min.js';
export default {
name: "Photos",
data() {
return {
wallpaper: {
id: '',
name: '',
thumbnail: '',
width: '',
height: ''
}
}
},
created() {
this.fetchWallpapers();
},
methods: {
fetchWallpapers() {
// fetching wallpapers
$( document ).ready(function() {
$('#demo1').flexImages({rowHeight: 250});
});
}
}
}
</script>
Мой взгляд на Laravel
<!DOCTYPE HTML>
<html>
<head>
<title>Website with wallpapers</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>window.Laravel = { csrfToken: '{{ csrf_token() }}' }</script><link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div id="app">
<div style="max-width:908px;margin:auto;padding:0 10px 10px">
@yield('content')
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Ошибка, которую я получаю
app.js:49266 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at HTMLDivElement.<anonymous> (app.js:49266)
at Function.each (app.js:6693)
at jQuery.fn.init.each (app.js:6528)
at jQuery.fn.init../public/js/jquery.flex-images.min.js.t.fn.flexImages (app.js:49261)
at HTMLDocument.<anonymous> (app.js:1831)
at mightThrow (app.js:9873)
at process (app.js:9941)