Question

首先，我想对Vue来说是新手，这是我有史以来第一个使用Vue的项目。我有组合框，我想根据所选组合框做一些不同的事情。我使用单独的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>

这是我的ts文件

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

如何在我的打字稿功能中获取选定的选项值？谢谢。

Answer 1

使用v-model绑定所选选项的值。 Here is an example。

<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>

从here可以看到更多参考。

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

您可以在select元素上使用 v-model 数据属性来绑定值。

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

希望这会有所帮助：-）

Answer 3

更改后的值将在event.target.value

中

const app = new Vue({
  el: "#app",
  data: function() {
    return {
      message: "Vue"
    }
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <select name="LeaveType" @change="onChange" class="form-control">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
</div>

Answer 4

您也可以使用v-model进行救援

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

<script>
export default {
    data() {
        return {
            leaveType: '',
        }
    },

    methods: {
        onChange() {
            console.log('The new value is: ', this.leaveType)
        }
    }
}
</script>

Answer 5

您可以保存您的 @ change =“ onChange（）” 使用情况观察者。 Vue为此进行计算和监视。如果您只需要该值，而无需其他复杂的事件属性。

类似的东西：

  ...
  watch: {
    leaveType () {
      this.whateverMethod(this.leaveType)
    }
  },
  methods: {
     onChange() {
         console.log('The new value is: ', this.leaveType)
     }
  }

Answer 6

onChangeMethod --> 您选择的方法，它可以是与您的程序相关的任何内容。

<template>
<select @change="onChangeMethod($event)">                                            
  <option value="test">Test</option>
  <option value="test2">Test2</option>
</select>
</template>

<script>
 data(){
   return{
    ...
     
   }
 },
 methods:{
     onChangeMethod(event)
     {
         console.log(event.target.value);
     }
 },
 created(){
   ...
 }   
</script>

Vue.js在@change上获得选择的选项

6 个答案: