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

您还可以在https://vuejs.org/v2/guide/forms.html

查看vue表单绑定选项

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

1 个答案: