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

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


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) } : {}"


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>