Vue.js在@change上获得选项

javascript html vue.js asp.net-mvc

2022-08-30 02:25:45

首先，我想说的是，我是 Vue 的新手，这是我第一个使用 Vue 的项目。

我有一个组合框，并希望根据所选的组合框做一些不同的事情。我使用一个单独的TypeScript文件。这是我的代码：vue.html

    <select name="LeaveType" @change="onChange()" class="form-control">
         <option value="1">Annual Leave/ Off-Day</option>
         <option value="2">On Demand Leave</option>
    </select>

这是我的TypeScript文件：

    onChange(value) {
        console.log(value);
    }

如何在我的 TypeScript 函数中获取选定的选项值？谢谢。

答案 1

用于绑定所选选项的值的值。下面是一个示例。v-model

<select name="LeaveType" @change="onChange($event)" class="form-control" v-model="key">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
    data: {
        key: ""
    },
    methods: {
        onChange(event) {
            console.log(event.target.value)
        }
    }
}
</script>

从这里可以看到更多的参考。

答案 2

@是 v-on 的快捷方式选项。仅当你想执行某些 Vue 方法时才使用 @ 。由于您不是在执行Vue方法，而是调用javascript函数，因此您需要使用onchange属性来调用javascript函数

<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

function onChange(value) {
  console.log(value);
}

如果你想调用 Vue 方法，就这样做吧——

<select name="LeaveType" @change="onChange($event)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
  ...
  ...
  methods:{
    onChange:function(event){
       console.log(event.target.value);
    }
  }
})

可以在选择元素上使用 v 模型数据属性来绑定值。

<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
    data:{
        selectedValue : 1, // First option will be selected by default
    },
    ...
    ...
    methods:{
        onChange:function(event){
            console.log(this.selectedValue);
        }
    }
})

希望这有助于：-）