VueJS click doesn't work on mobile, click listener is not detected

问题

I'm trying to figure out where the problem is with VueJS on click listener. So here i have a list of possible language that a user can choose from:

• EN
• FR
• IT

this list is wrapped into a <div> that shows or hide the list by using a click listener, the problem is that it only works on desktop and not on mobile

Here some video i captured to show you where is the problem

Desktop (here is working as expected)

Mobile (here is not working anymore)

And here there is the code i'm now using for the component

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

As you can see i use the toggleList variable to toggle the language list and by doing some tests if i click on the <div> it doesn't catch the event I've even tried other libraries like HammerJS but nothing is working

来源：https://stackoverflow.com/questions/53400274/vuejs-click-doesnt-work-on-mobile-click-listener-is-not-detected