带有Axios的Vue下拉菜单预填充

Question

我正试图弄清楚如何预填充我的vue下拉列表。

当我点击下拉菜单时，它不会显示任何内容，但当我点击关闭并返回时，它会显示选项。这不是我想要的行为。我希望它在单击一次时显示选项。

<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>

谢谢你的帮助！

Answer 1

您可以这样做。您忘记将value绑定到选项。这是样本

<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

以下是使用@Naren建议的的答案

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:{},
....
}

如果您使用nuxt，我建议使用AsyncData，因为它会自动将数据绑定到要使用的属性

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
}

如果你使用的是vuejs3，除了在setup((中，你需要做与mounted挂钩相同的事情。此外，你可能需要导入路由器

import { useRoute } from 'vue-router'
export default {
setup(props, ctx) {
const route = useRoute()
onMounted(() => {
const id = route.params.id

///add code here
})
}
}