我试图找出点击监听器上VueJS的问题所在。 所以在这里,我列出了用户可以选择的可能语言:
此列表被包装到int num[5] = {1,2,1,3,3};
unordered_map <int,int> mymap;
for(int i=0;i<5;i++)
{
++mymap[num[i]];
}
cout<<"0:"<<mymap[0]<<endl;
cout<<"1:"<<mymap[1]<<endl;
cout<<"2:"<<mymap[2]<<endl; //Should only find 10 value in 2
cout<<"3:"<<mymap[3]<<endl;
cout<<"4:"<<mymap[4]<<endl;
中,该{@ 1}通过使用单击侦听器显示或隐藏列表,问题是它仅在台式机上可用,而在移动设备上不可用
这里捕获了一些视频,向您展示问题出在哪里
Desktop (here is working as expected)
Mobile (here is not working anymore)
这是我现在用于组件的代码
<div>
如您所见,我使用<template>
<div @click="toggleList = !toggleList" class="lang-area" title="Change language">
<ul class="lang-data">
<li>{{ currentLanguage | uppercase }}</li>
<li :key="index"
@click="selectLang(lang)"
class="lang-select"
v-for="(lang, index) in listLanguages"
v-if="toggleList">
{{ lang | uppercase }}
</li>
</ul>
<img alt="list languages" class="lang-list"
src="../../static/icons/language-icon.svg">
</div>
</template>
<script>
export default {
props: {
language: String,
},
data() {
return {
currentLanguage: this.language,
toggleList: false,
languageList: ['en', 'fr', 'it'],
};
},
computed: {
listLanguages() {
return this.languageList.filter(lang => lang !== this.currentLanguage);
},
},
methods: {
selectLang(lang) {
this.currentLanguage = lang;
this.$emit('languageChanged', this.currentLanguage);
},
},
};
</script>
<style scoped lang="sass">
@import "LanguageList"
</style>
变量来切换语言列表
并通过做一些测试,如果我单击toggleList
时未捕获到该事件
我什至尝试过其他类似HammerJS的库,但没有任何作用