Soy principiante en VueJs, así que tengo este problema.
Aquí mi código
<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>Entonces tengo mi matriz
data: () => ({ lotes: [], selectedLote : null })Luego relleno esta matriz usando esto (this.products es una matriz poblada a partir de una solicitud de API)
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}); } } } }Usando console.logs, puedo ver que la matriz se llena correctamente, pero las opciones no
esta suele ser mi forma estándar de escribir una selección de una 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>si luego necesita tener los datos en correlación con otros, como una lista de productos u otros, siempre es recomendable usar propiedades calculadas , para asegurarse de que los datos siempre sean correctos algunos ejemplos
En la repetición de Vue, se requiere una clave.
v-bind no está configurado en valor.
Si toma {{lots}} y el valor se expresa normalmente, intente modificar lo siguiente.
<md-option v-for="(lote, index) of lotes" :value="lote.value" :key="index">{{lote.text}}</md-option>Solo necesita vincular el atributo de valor de opciones de selección
<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> Para obtener información detallada sobre el uso del atributo key , consulte la documentación de la API key .