Is there a way to dynamically insert click events in Vue.js?

Question

Trying to achieve inserting some computed methods onto an element depending on mobile viewports only. Here's a basic gist of what I'm working with:

<a class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>

<script>

export default {
    data() {
        return {
            isClosed: false
        }
    },
    computed: {
        toggleMenu() {
            return {
                isClosed: this.isClosed
            }
        }
    },
    watch: {
        browserWidth(prevWidth, newWidth) {
            console.log('width changed from ' + newWidth + ' to ' + prevWidth);
    },
    mounted() {
        var that = this;
        this.$nextTick(function() {
            window.addEventListener('resize', function(e) {
                that.browserWidth = window.innerWidth;
                if(that.browserWidth > 824) {
                    console.log('Desktop View');
                } else {
                    console.log('Mobile View');
                }
            })
        })
    }
}
</script>

I would like to try to use the resize event to determine browser width so that I can dynamically insert the computed function onto that <a> tag

I just want it to work lol. It seems like a simple enough thing to do where it shouldn't affect the entire project drastically performance wise. All it's really doing is toggling some CSS. It works when I have @click="onTopicClicked($event, m, t); isClosed = !isClosed". I'd like to achieve the same thing but instead of already declaring the event there - I'd like to dynamically insert it on mobile views. — Doolan
– Doolan, Commented Jun 4, 2018 at 20:26
declare one data property like customEvent: function () {} and in the template, <a @click="customEvent()" />, then if some event triggered, assign customEvent=function (data, m, t) {/*do something*/} — Sphinx
– Sphinx, Commented Jun 4, 2018 at 21:02

Nima Ajdari · Accepted Answer · 2018-06-05 06:44:16Z

3

You could either provide two different elements (one for desktop and another for mobile) as stated by Karthikeyan, or conditionally add click event to that element:

v-on="isMobileView ? { mouseover: onTopicClicked($event, m, t) } : {}"

answered Jun 5, 2018 at 6:44

Nima Ajdari

2,9342 gold badges18 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Karthikeyan Over a year ago

I like this one @Nimaj suggested than my solution, as here the html code is not duplicated

Doolan Over a year ago

I added these two methods for the sake of testing what is firing enabled() {console.log('enabled')}, disabled() {console.log('disabled')} and on the element it looks like v-on:click="isDesktopView ? {click: disabled()} : {click: enabled()}" but it seems to only log "disabled" whether I'm desktop or mobile.

telecomshy Over a year ago

I use Vue3, If event handler with brackets, like this,

<canvas id="s-canvas" :width="contentWidth" :height="contentHeight" v-on="refreshByClick?{click:refreshCode()}:{}"></canvas>

. It seems doesn't work and component doesn't render, but if without brackets, It works fine. I don't know why this happen.

Karthikeyan · Accepted Answer · 2018-06-05 03:11:19Z

You can add a data that says if the view is mobile or not and use v-if , v-else and have the @click only added to the v-if="isMobileView"

<a v-if="isMobileView" class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} @click="onTopicClicked($event, m, t)" href="#">{{t.title}}</a>

<a v-else class="nav-link float-left p-x-y-16" v-bind:class={active:isCurrentTopicId(t.id)} href="#">{{t.title}}</a>

<script>

export default {
    data() {
        return {
            isClosed: false,
            isMobileView: false
        }
    },
    computed: {
        toggleMenu() {
            return {
                isClosed: this.isClosed
            }
        }
    },
    watch: {
        browserWidth(prevWidth, newWidth) {
            console.log('width changed from ' + newWidth + ' to ' + prevWidth);
    },
    mounted() {
        var that = this;
        function checkIfMobileView() {
            that.isMobileView = window.innerWidth <= 824;
        }
        this.$nextTick(function() {
            window.addEventListener('resize', checkIfMobileView);
        });
        checkIfMobileView();
    }
}
</script>

Collectives™ on Stack Overflow

Is there a way to dynamically insert click events in Vue.js?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related