Как вызвать функцию при выборе опции в поле выбора

Question

Я пытаюсь вызвать функцию при выборе опции в поле выбора.

<select v-on:change="login(this)">
    <option value="github" id="1" selected"> Github</option>
    <option value="bitbucket" id="2" selected"> Bitbucket</option>
</select>

Я попробовал следующий способ в блоке методов, но он не работал должным образом

login() {
    if (this.options[this.selectedIndex].id == "1") {
        console.log("hi");
    } else {
        console.log("hello");
    }
}

Answer 1

Во-первых, вам нужно удалить выбранное »из обоих html-элементов, и вы можете рассмотреть возможность привязки опции данных к функции наблюдения, которая прослушивает изменения событий, например:

JS

new Vue({
  el: '#app',
  data: {
    optionPicked: null
  },
  watch: {
    optionPicked: function() {
        console.log(this.optionPicked)
    }
    }
})

HTML

<div id="app">
  <select v-model="optionPicked">
  <option selected disabled>Disabled item</option>
    <option value="github-value" id="1"> Github</option>
    <option value="bitbucket-value" id="2"> Bitbucket</option>
  </select>
</div>

JS Fiddle: https://jsfiddle.net/k0f8ugv8/

Параметры привязки формы vue также можно просмотреть по адресу: https://vuejs.org/v2/guide/forms.html