Vuejs populate select options from api

user_15357711 0
Viewed 973

Im begginer in VueJs so i have this problem

Here my code

<md-select placeholder="Seleccione Lote" v-model="selectedLote" name="lotes" id="lotes">
   <md-option  v-for="lote of lotes" value="lote.value">{{lote.text}}</md-option>
</md-select>

Then i have my array

data: () => ({
        lotes: [],
        selectedLote : null
    })

Then i populate this array using this (this.products is an array populated from an api request)

mounted(){
  this.fillLotesArray();
},
methods:{
fillLotesArray(){
            for(let product of this.products){
                if(this.lotes.findIndex(lote => lote.value === product._source.Lote) === -1){
                    this.lotes.push({value:product._source.Lote, text:product._source.Lote});
                }
            }
        }
}

Using console.logs i can see the array is filled correctly but the options dont

materialize vue.js javascript
3 Answers

this is usually my standard way to write a select from an API

<template>
    <select v-model="selectedOption">
        <option v-for="(item, index) in options" :value="item.value" :key="index">{{ item.text }}</option>
    </select>
</template>

<script>
export default {
    name: 'ExampleOptions',
    data() {
        return {
            options: [],
            selectedOption: null,
        };
    },
    mounted() {
        this.loadOptions();
    },
    methods: {
        loadOptions() {
            api.getOptions().then((options) => {
                this.options = options;
            });
        },
    },
};
</script>

if you then need to have the data in correlation to others, such as a list of products or others, it is always advisable to use computed properties, to make sure that the data is always correct some examples

user_93003280

In Vue's repetition, a key is required.

v-bind is not set in value.

If you take {{lots}} and the value is expressed normally, try modifying the following.

<md-option  v-for="(lote, index) of lotes" :value="lote.value" :key="index">{{lote.text}}</md-option>
user_49332700

You just need to bind the select options value attribute

<md-select placeholder="Selection Lote" v-model="selectedLote" name="lotes" id="lotes">
   <md-option  v-for="(lote, index) of lotes" :value="lote.value" :key="index">{{lote.text}}</md-option>
</md-select>

For detailed usage of the key attribute, please see the key API documentation.

user_85781930
Related