How can I send the selected item from the dropdown menu to Axios in order to retrieve data? I need to pass the item itself, not just the ID, to the API.
<label>City</label>
<select @change="getArea()" v-model="key">
<option :value='0'>Select City</option>
<option v-for='data in cityList' :value='data.id'>{{ data.city }}
</option>
</select>
<script>
var self = this;
axios.get('http://172.31.0.114:5008/api/city/'+this.key) //I want to pass the selected item (text) to the API.
.then(function(res) {
self.areaList = res.data;
})
.catch(function(error){
console.log('Error:', error);
});
</script>