在选择框中选择选项时如何调用函数

【问题标题】：How to call a function while selecting an option in select box在选择框中选择选项时如何调用函数
【发布时间】：2018-11-04 14:52:58
【问题描述】：

我试图在选择框中选择一个选项时调用一个函数。

<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");
    }
}

【问题讨论】：

只有一个选项应该是selected。您可以改用@click 事件，因为@change 事件仅在数据更改时触发

标签： javascript vue.js vuejs2

【解决方案1】：

首先，您需要从两个 html 元素中删除 selected"，您可以考虑将 data 选项绑定到监听更改事件的 watch 函数，例如：

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 小提琴：https://jsfiddle.net/k0f8ugv8/

您还可以查看 vue 表单绑定选项：https://vuejs.org/v2/guide/forms.html

【讨论】：