如何从 VueJs 的下拉列表中获取选定的值？

Question

我在这里有一个文本框和一个下拉列表。下拉列表和文本框事件有效。我的问题是如何在 keyup 事件中获取下拉列表的选定值？我有谷歌它。它看起来与普通的 javascript 方法不同。我尝试在选择标签中添加 v-model，但添加后，下拉列表不再起作用。

new Vue({
  el: "#app",
  data() {
    return {
      currency_from_amount: 0,
      currencyFromOptions: [],
      selected: ''
    };
  },
  methods: {
    convert: function(event) {
      debugger

    }
  },
  mounted() {
    axios
      .get("https://openexchangerates.org/api/currencies.json")
      .then(response => (this.currencyFromOptions = response.data))
      .catch(error => {
        console.log(error);
        
      })
      .finally(() => (this.loading = false));
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
  <input class="form-control" type="number" name="currency_from_amount" id="currency_from_amount" v-model="currency_from_amount" @keyup="convert">

  <select class="form-control" name="currency_from_code" id="currency_from_code">
    <option v-for="(value,key) in currencyFromOptions" :value="key">{{ value }}</option>
  </select>
</div>

Answer 1

要设置选定的变量，请添加如下更改处理程序

<select class="form-control" name="currency_from_code" id="currency_from_code" @change="onSelected($event)">

写一个方法如下

onSelected:function(event){
          this.selected = event.target.value;
        }

一旦你设置了这个变量，你就可以在 keyup 事件中使用它