我试图找出 VueJS 在点击侦听器上的问题出在哪里。所以这里我有一个用户可以选择的可能语言列表:
该列表被包装成一个<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 …Run Code Online (Sandbox Code Playgroud)