Question

我正在从这里https://github.com/Pixabay/jQuery-flexImages使用带有外部jquery库的vue.js 2.5。我的后端是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)

jQuery脚本在Vue.js模板中不起作用

0 个答案: