Блог

У меня есть пара опций в <select> элементе. Как я могу вызвать функцию при выборе опции?

Вот что у меня есть на данный момент с точки зрения JS:

 export default {
  name: 'Dropdown',
  methods: {
    onChange() {
      logout();
    },
  },
  computed: {
    logout() {
      console.log('logout);
    },
  },
};
 

Мое меню выбора выглядит следующим образом: <select @change="onChange">...

Когда я выбираю опцию, я получаю следующую ошибку: logout is not defined . Есть идеи?

вам нужно использовать это для ссылки на экземпляр, чтобы он был this.logout();

Редактировать:

Вам нужно создать onLogout в свойстве methods, если вы хотите сделать что-то конкретное, вычисляемое свойство — это реактивное свойство, которое что-то возвращает, на самом деле оно не предназначено для выполнения чего-то, что обрабатывает выход из системы.

Как я вижу, ваше вычисляемое свойство выхода из системы будет больше связано с получением текущего статуса пользователя, если он выходит из системы или нет, но было бы лучше переименовать его.

Итак, если вы хотите сделать что-то конкретное при изменении выбора (например, метод выхода из системы)

вам нужно адаптировать свой компонент таким образом:

 export default {
  name: 'Dropdown',
  methods: {
    onChange() {
      this.logout();
    },
    logout() {
     console.log('logout called');
    },
  },
  computed: {
    userStatus() {
    // return a state or something, but must return something
    return ...
    },
  },
};

 

Я приглашаю вас прочитать эту документацию, чтобы получить лучшее представление о вычисляемых свойствах и методах

https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties
https://v1.vuejs.org/guide/events.html

Функция выхода из системы должна быть вверху объекта methods, и вы ссылаетесь на нее с помощью this.logout()