Why is the dropdown not calling the function in VueJS?

Question

I have a very simple component LocaleSwitcher.vue made with Element:

<template>
  <el-dropdown trigger="click">
    <div>
      <i class="el-icon-map-location"></i>
    </div>
    <el-dropdown-menu>
      <el-dropdown-item @click="switchLocale('ru')">
        Русский
      </el-dropdown-item>
      <el-dropdown-item @click="switchLocale('en')">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "LocaleSwitcher",
  methods: {
    switchLocale: function(locale) {
      console.log(locale);
      if (this.$i18n.locale !== locale) {
        this.$i18n.locale = locale;
      }
    }
  }
};
</script>

In my view, I load it like this:

<template>
  <div class="login-container">
    <el-form>
      <div class="title-container">
        <h3 class="title">{{ $t("loginPage.formTitle") }}</h3>
        <LocaleSwitcher class="set-language"></LocaleSwitcher>
      </div>
  </div>
</template>

<script>
import LocaleSwitcher from "@/components/LocaleSwitcher";

export default {
  name: "Login",
  components: {
    LocaleSwitcher
  }
};
</script>

It is displayed on the page, there are no errors, but when choosing a language, nothing happens, including the choice is not written in the console.

Answer 1

Are you using Element? See the docs for "Command event".

The el-dropdown has a @command which is triggered when a dropdown item is selected. The command argument on el-dropdown-item is passed as the first argument.

<template>
  <el-dropdown trigger="click" @command="switchLocale">
    <div>
      <i class="el-icon-map-location"></i>
    </div>
    <el-dropdown-menu>
      <el-dropdown-item command="ru">
        ???????
      </el-dropdown-item>
      <el-dropdown-item command="en">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: "LocaleSwitcher",
  methods: {
    switchLocale: function(locale) {
      console.log(locale);
      if (this.$i18n.locale !== locale) {
        this.$i18n.locale = locale;
      }
    }
  }
};
</script>