@change에서 Vue.js get selected 옵션

@change에서 Vue.js get selected 옵션

콤보박스가 있는데 선택한 콤보박스를 기준으로 다른 작업을 하고 싶습니다.저는 별도로 사용합니다.vue.htmlTypeScript 파일을(를)제 암호는 이렇습니다.

<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 기능에서 선택한 옵션 값을 얻으려면 어떻게 해야 합니까?

사용하다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>

여기서 더 많은 참고 자료를 볼 수 있습니다.

@는 v-on에 대한 바로 가기 옵션입니다.일부 Vue 메서드를 실행하려는 경우에만 @을 사용합니다.vue 메서드를 실행하지 않고 대신 javascript function을 호출하므로 onchange 속성을 사용하여 javascript function을 호출해야 합니다.

<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 methods를 부르려면 이렇게 하세요-

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

도움이 되길 바라요 :-)

변경된 값이 인(in)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>

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>

ChangeMethod --> 선택한 방법에서는 프로그램과 관련된 모든 것을 사용할 수 있습니다.

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

@change="()"를 Change()에 저장할 수 있습니다.뷰는 컴퓨터와 시계, 그것을 위해 고안된 것입니다.값만 필요하고 다른 복잡한 이벤트 속성은 필요하지 않은 경우.

다음과 같은 경우:

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

언급URL : https://stackoverflow.com/questions/50982408/vue-js-get-selected-option-on-change