Vue.js는 @change에서 선택된 옵션을 얻습니다.

Question 1

먼저 Vue를 처음 접한 사람이라고 말하고 싶습니다. Vue를 사용한 첫 번째 프로젝트입니다. 콤보 박스가 있고 선택한 콤보 박스에 따라 다른 작업을하고 싶습니다. 별도의 vue.html 및 typescript 파일을 사용합니다. 여기 내 코드가 있습니다.

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

Typescript 함수에서 선택한 옵션 값을 얻는 방법은 무엇입니까? 감사.

Question 2

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>

더 많은 참조는 여기 에서 볼 수 있습니다 .

Question 3

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

도움이 되었기를 바랍니다 :-)

Question 4

변경된 값은 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>

스 니펫 확장

Question 5

구조를 위해 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>

Question 6

사용 감시자를 @ change = "onChange ()" 로 저장할 수 있습니다 . Vue는 컴퓨팅과 감시를 위해 설계되었습니다. 다른 복잡한 이벤트 속성이 아닌 값만 필요한 경우.

다음과 같은 것 :

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