vue @click 功能只有一半有效？

Question

我在这里工作： http://nufaith.ca/justinatkins/index.html

随时查看我的源代码，app.js 代码如下

EDIT1：我已经隐藏了顶部的透明徽标，所以现在您可以清楚地看到 2 个不同的主图

目标：按箭头键或 V 形图标，主英雄图像将会改变 + 顶部图像的模糊副本

问题：当您@click 人字形时，它们不会像您按箭头键那样做同样的事情

编辑2：这是我的全部 app.js

window.Event = new Vue()
Vue.use(VueLazyload)

Vue.component('contact', {
    template: `
            <div class="contact">
                <a href="contact.html">CONTACT</a>
            </div>
    `,
})

Vue.component('hero-bg', {
    template: `
            <div class="hero-bg">
                <div class="hero">
                    <img id="pushed" :src="selectedItem.img" />
                </div>
            </div>
    `,
    data() {
        return {
            gridEnabled: false,
            selected: 0,
            thing: true
        }
    },
    computed: {
        selectedItem() {
            return info[this.selected]
        },
        maxImages() {
            return info.length - 1
        }
    },
    created() {
        window.addEventListener('keydown', (e) => {
            if (e.keyCode === 37) {
                this.previous()
                return
            }

            if (e.keyCode === 39) {
                this.next()
                return
            }
        })
        Event.$on('updateImg', (index) => {
            this.selected = index
            this.gridEnabled = !this.gridEnabled
        })
    },
    methods: {
        next() {
            this.selected === this.maxImages ? this.selected = 0 : this.selected += 1
        },
        previous() {
            this.selected === 0 ? this.selected = this.maxImages : this.selected -= 1
        }   
    }
})  

Vue.component('hero', {
    template: `
        <div class="hero-container" v-if="!gridEnabled">
            <div class="hero">
                <img :src="selectedItem.img" v-if="thing" alt=""/>
            </div>
            <div class="hero-desc">
                <button class="control left" @click="previous">
                    <i class="zmdi zmdi-chevron-left"></i>
                </button>
                <span class="hero-desc-title" v-html="title"></span>
                <button class="control right" @click="next">
                    <i class="zmdi zmdi-chevron-right"></i>
                </button>
                <br/>
                <button class="view-all-button" @click="enableGrid">OVERVIEW</button>
            </div>
        </div>
    `,
    data() {
        return {
            gridEnabled: false,
            selected: 0,
            thing: true
        }
    },
    computed: {
        selectedItem() {
            return info[this.selected]
        },
        title() {
            const comma = this.selectedItem.title.indexOf((','))
            const len = this.selectedItem.title.length
            const strBeginning = this.selectedItem.title.substring(comma, 0)
            const strEnd = this.selectedItem.title.substring(comma, len)
            if (this.selectedItem.title.includes(',')) {
                return `<span>${strBeginning}<span class="font-regular font-muted">${strEnd}</span></span>`
            }
            return this.selectedItem.title
        },
        maxImages() {
            return info.length - 1
        }
    },
    created() {
        window.addEventListener('keydown', (e) => {
            if (e.keyCode === 37) {
                this.previous()
                return
            }

            if (e.keyCode === 39) {
                this.next()
                return
            }
        })
        Event.$on('updateImg', (index) => {
            this.selected = index
            this.gridEnabled = !this.gridEnabled
        })
    },
    methods: {
        next() {
            this.selected === this.maxImages ? this.selected = 0 : this.selected += 1
        },
        previous() {
            this.selected === 0 ? this.selected = this.maxImages : this.selected -= 1
        },
        enableGrid() {
            this.gridEnabled = !this.gridEnabled
            window.scroll(0, 0)
            Event.$emit('enableGrid')
        }
    }
})

Vue.component('grid', {
    template: `
        <div class="grid" v-if="gridEnabled">
            <div class="grid-item aspect" v-for="(item, index) in info" @click="updateImg(index)">
                <img v-lazy="item.img"/>
            </div>
        </div>
    `,
    created() {
        Event.$on('enableGrid', () => this.gridEnabled = !this.gridEnabled)
    },
    data() {
        return {
            gridEnabled: false
        }
    },
    computed: {
        info() {
            return info
        }
    },
    methods: {
        updateImg(index) {
            this.gridEnabled = !this.gridEnabled
            window.scroll(0, 0)
            Event.$emit('updateImg', index)
        }
    }
})

new Vue({
    el: '#app'
})

Answer 1

无论是使用按键还是箭头图标都可以。我认为你的问题是图像尺寸。打开检查并找到 .app .hero-container .hero img 当您按箭头或单击图标时您可以看到更改。但这需要很多时间。

Answer 2

因为照片尺寸的原因，证明第一次加载图片后，你不会再遇到同样的问题。我建议您在渲染（或渲染）页面之前预加载照片。看看这个 link:

Answer 3

问题是因为您在 hero 和 hero-bg 两个组件中都听到了按键。但是 Chevron click 仅由组件 hero 处理，因此只有主图像发生变化。

可以通过一些方法解决

1。有单独的组件

有一个单独的人字形组件。单击按钮时发出 Events 并在两个组件 hero 和 hero-bg 中收听。

this.$emit('chevron-left', true);
this.$emit('chevron-right', true);

收到事件后，触发相应的previous()或next()方法来更改图像。

2。为 chevron

发出一个单独的事件

从组件 hero 发出 V 形点击事件并在 hero-bg 中收听并相应地调用方法。

希望对您有所帮助！

vue @click 功能只有一半有效？

vue @click function only half works?

html

javascript

click

vue.js

1。有单独的组件

2。为 chevron