Vue with Axios drop down pre populate - vue.js

Question

I'm trying to figure out how to pre-populate my vue drop down.
When I click on the drop down it doesn't show anything, but when I click off of it and back on it, it will show the options. This is not the behavior I want. I would like it to show the options when clicking on it once.
<template>
<select v-model='selectedApp' #click="populateApp(results)">
<option value="" disabled> Select an application</option>
<option v-for="result in results">{{ result.name }} {{result.id}}</option>
</select>
</template>
<script>
import axios from 'axios'
export default{
data(){
return {
selectedApp: '',
results: []
}
},
methods: {
populateApp: function(event){
axios.get('/apdata',{params: {query: this.query}})
.then(response => {
this.results = response.data;
console.log(this.results);
});
}
}
}
</script>
Thanks for you help!

Answer 1

You can do something like this. And you forgot to bind the value to option. Here's sample
<template>
<div>
<select v-model="selectedApp">
<option selected disabled value="">Choose</option>
<option v-for="result in results" :value="result.id">{{ result.name }} {{ result.id }}</option>
</select>
<div>selectedApp: {{ selectedApp }}</div>
</div>
</template>
export default {
data() {
return {
selectedApp: "",
results: []
}
},
async mounted() {
try {
const response = await axios.get('/apdata', { params: { query: this.query } })
this.results = response.data
} catch(err) {
console.log(err)
}
}
}

Answer 2

Here is you answer using #Naren suggested
import axios from 'axios'
export default {
data() {
return {
selectedApp: '',
results: []
}
},
mounted() {
axios.get('/apdata', {
params: {
query: this.query
}
})
.then(response => {
this.results = response.data;
console.log(this.results);
})
},
props:{},
....
}
If you are using nuxt i suggest using AsyncData as it will automatically bind the data to the property to be used
async asyncData({ app, params }) {
const { data } = await app.$axios.get(`path/${params.code}`)
return { results: data.error ? [] : data }
//data(){ results:[] } does not need to be defined as this will be taken care of by asyncData
}
If you are using vuejs3 you will need to do the same thing as mounted hook except in setup() additionally you may need to import the router
import { useRoute } from 'vue-router'
export default {
setup(props, ctx) {
const route = useRoute()
onMounted(() => {
const id = route.params.id
///add code here
})
}
}