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

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

这可以通过各种方式解决。

1。有单独的组件

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

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

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

2。为 chevron 发出单独的事件

从组件hero 在 chevron click 上发出一个事件并在hero-bg 中监听它并相应地调用方法。

希望这会有所帮助！

Answer 2

无论是使用键还是箭头图标，它都有效。我认为你的问题是图像大小。打开检查并找到.app .hero-container .hero img，当您按下箭头或单击图标时，您可以看到更改。但这需要相当长的时间。

Answer 3

这是因为照片的大小，证明第一次加载图像后，你不会再遇到同样的问题。我建议您在渲染（或渲染）页面之前预加载照片。看看这个链接：

Fastest way to preload/load large images