Vue 与 Axios 下拉预填充

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 绑定到选项。这里是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

这是您使用@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，则需要执行与 mounted 钩子相同的操作，除了在 setup() 中，您可能还需要导入路由器

  import { useRoute } from 'vue-router'

  export default {
    setup(props, ctx) {
      const route = useRoute()

      onMounted(() => {
        const id = route.params.id


        ///add code here
      })
    }
  }