Ad
How To Populate A Vuetify Select Using Data From Axios
I need to populate a Vuetify select, but there is a problem with it, my Get method returns data, but the vuetify select only show something like this:
The text shows valid data:
[ { "id": 1 }, { "id": 2 } ]
And to populate the Select i follow the documentatioin adding :items="entidades" and :item-text="entidades.id" and :item-value="entidades.id"
<v-select :items="entidades" :item-text="entidades.id" :item-value="entidades.id" single-line auto prepend-icon="group_work" label="Seleccionar Grupo"></v-select>
This is my code form script
`data() {
return(){
entidades: [{
id: ''
}],
}
}`
I already tried to put 0, but it's the same result.
My axios.get method.
axios.get('http://localhost:58209/api/GetEntidades', {
headers:{
"Authorization": "Bearer "+localStorage.getItem('token')
}
})
.then(response => {
console.log(response)
this.entidades = response.data;
})
.catch(error => {
console.log(error.response)
});
Thank you so much
Ad
Answer
item-text
and item-value
are the name of the properties each item will display and use as value, respectively. So use item-text="id" item-value="id"
:
<v-select :items="entidades" item-text="id" item-value="id" single-line auto prepend-icon="group_work" label="Seleccionar Grupo"></v-select>
Demo:
new Vue({
el: '#app',
data () {
return {
entidades: [ { "id": 1 }, { "id": 2 } ]
}
}
})
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vuetify.min.js'></script>
<div id="app">
<v-app>
<v-container>
<v-select :items="entidades" item-text="id" item-value="id" single-line auto prepend-icon="group_work" label="Seleccionar Grupo"></v-select>
</v-container>
</v-app>
</div>
Ad
source: stackoverflow.com
Related Questions
- → should I choose reactjs+f7 or f7+vue.js?
- → Get the calling element with vue.js
- → Vue.js - Binding radio elements of same name to array
- → Get data from DB based on selected values. Vue.js + laravel
- → Vuejs IF statement
- → VueJS set Input field data
- → How do I use vue-resource v-links inside a vueify component?
- → Export more than one variable in ES6?
- → How create a todo list with octobercms?
- → Using vue.js in Shopify liquid templates
- → Apply a discount using VueJS and Laravel
- → Laravel 5.2 CORS, GET not working with preflight OPTIONS
- → Vue @click doesn't work on an anchor tag with href present
Ad