Javascript 有没有办法在Vue.js中动态插入单击事件？

尝试实现仅根据移动视口将某些计算方法插入到图元上。以下是我工作的基本要点：

<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>

导出默认值{
数据（）{
返回{
isClosed:错误
}
},
计算：{
切换菜单（）{
返回{
isClosed：这个
}
}
},
观察：{
浏览器宽度（prevWidth、newWidth）{
log（'宽度从'+newWidth+'更改为'+prevWidth'）；
},
安装的（）{
var=这个；
此.$nextTick（函数（）{
window.addEventListener（'resize'，函数（e）{
that.browserWidth=window.innerWidth；
如果（即.browserWidth>824）{
console.log（“桌面视图”）；
}否则{
console.log（“移动视图”）；
}
})
})
}
}

---

我想尝试使用resize事件来确定浏览器宽度，这样我就可以动态地将计算出的函数插入到

标记上您可以添加一个数据，说明视图是否移动，使用v-if、v-else并将@click only添加到v-if=“isMobileView”

导出默认值{
数据（）{
返回{
isClosed:错误，
isMobileView：错
}
},
计算：{
切换菜单（）{
返回{
isClosed：这个
}
}
},
观察：{
浏览器宽度（prevWidth、newWidth）{
log（'宽度从'+newWidth+'更改为'+prevWidth'）；
},
安装的（）{
var=这个；
函数checkIfMobileView（）{
that.isMobileView=window.innerWidth您可以按照Karthikeyan的说明提供两个不同的元素（一个用于桌面，另一个用于移动设备），或者有条件地向该元素添加click事件：

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

你的目标是什么，但纯粹是功能性的观点？我只想让它工作lol。这似乎是一件足够简单的事情，它不应该对整个项目的性能产生重大影响。它真正做的是切换一些CSS。当我有@click=“onTopicClicked（$event，m，t）；isClosed=！isClosed”时它就工作了。我想实现同样的效果，但不是已经在那里声明了事件-我想在移动视图上动态插入它。声明一个数据属性，如
customEvent:function（）{}
，然后在模板中，
，如果触发了某个事件，则分配
customEvent=function（data，m，t）{/*执行某些操作*/}
downpoite lol的原因是什么。我喜欢@Nimaj建议的这个方法，而不是我的解决方案，因为这里的html代码不重复。我添加这两个方法是为了测试触发的内容
enabled（）{console.log（'enabled'）}，disabled（）{console.log（'disabled'）}
在元素上看起来像
v-on:click=“isDesktopView？{click:disabled（）}:{click:enabled（）}”
但无论我是桌面还是移动设备，它似乎只记录“disabled”。
v-on="isMobileView ? { mouseover: onTopicClicked($event, m, t) } : {}"