[解決済み] Vue.jsの@changeで選択されたオプションを取得する

質問

まず最初に、私は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>

これが私の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>

より詳細な情報は、以下のサイトをご覧ください。 こちら .