vue事件不起作用-nuxtjs静态网站

Question

I have set up mouseover and mouseleave event on img tag:

<img @mouseover="large" @mouseleave="resize" src="/img/intro-bologna-1.jpg" alt="Bologna gallery" class="gallery__img gallery__img--1">

methods:{
        large(event){
            let siblings = this.findAllSiblings(event.target)
            siblings.forEach(sibling => sibling.style.transform = 'scale(.9)')
            event.target.style.transform = 'scale(1.2)'
        },
        resize(event){
            let siblings = this.findAllSiblings(event.target)
            siblings.forEach(sibling => sibling.style.transform = '')
            event.target.style.transform = ''
        },
        findAllSiblings(el){
            let parent = el.parentElement;
            let children = Array.from(parent.children);
            let siblings = children.filter(child => {
                return child !== el
            })
            return siblings
        }
    }

I dont understand why but when I run npm run generate and check the index.html file (I want to build a 100% static website) the hover effect doesn't work anymore (it works in dev enviroment)

I've checked the source of the dist folder and I have an pages_index.a57c13c1cfd73bfe116e.js file where I can see the methods I wrote

How can I solve? Thanks

Answer 1

I've tested your code and it works just fine .

I believe that your script paths are wrong in the generated index.html as you probably don't run it from root of domain. Your paths to assets like /_nuxt/ will be wrong. You should be able to verify this by looking into the console, you will see lot of these not found files:

In order to test your generated index.html just like this in browser, you might want to turn your /dist/ folder into a vhost using whatever environment you prefer. To test your code, i used laravel-valet and valet link in /dist/ folder to a sample domain, but you might just as well use Apache vhost, upload the code to testing webhosting or anything like that.