1

Como podría obtener correctamente los datos? Estoy intentando obtener los datos con el siguiente formato 1997 - 1998 CI

introducir la descripción de la imagen aquí

El select al cual le estoy pasando los datos que se encuentran en base, en el cual llamo al metodo getPeriodoMalla que tengo en el script

<select v-model="periodoLectivo" class="form-control col-md-12" @click="getPeriodoMalla()">
    <option v-for="periodo in arrayPeriodo" :key="periodo">{{periodo}}</option>
</select> 

El script

<script>
export default {
    data() {
        return {
            periodoLectivo: '',
            pAcademInicio: '',
            cicloInicio: '',
            arrayPeriodo: [],
        }
    },
    methods: {
        getPeriodoMalla() {
            let me = this;
            var url = '/mallamaterias/periodolectivo';
            axios.get(url).then(function(response) {
                var respuesta = response.data;
                me.arrayPeriodo = respuesta.periodo;

                me.pAcademicoInicio = arrayPeriodo[0]['pAcademicoInicio'];
                me.pAcademicoFin=arrayPeriodo[0]['pAcademicoFin'];
                me.cicloLectivoInicio=arrayPeriodo[0]['cicloLectivoInicio'];

                me.periodoLectivo = me.pAcademicoInicio + ' - ' +me.pAcademicoFin + ' ' + me.cicloLectivoInicio;

                })
                .catch(function(error) {
                    console.log(error);
                });
        }
}

0

2 respuestas 2

1

Cambia en tu option el objeto que estás intentando usar como key por el uso de una clave que tiene valor único que para este caso sería el id de este modo:

<option v-for="periodo in arrayPeriodo" :key="periodo.id">{{periodo}}</option>

En la documentación de VueJS se menciona que y cito:

To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements

Que se pudiera traducir como:

Darle una pista a Vue y así pueda rastrear la identidad de cada nodo, para que así se puedan reordenar y reusar los elementos existentes.

Así mismo considera usar valores de tipo numérico o cadena de texto como valores de la directiva :key que formarían parte del grupo de valores primitivos de JavaScript

0

Adjunto la solución en base a al comentario de @Aprendiz y a la documentación de vue

pase de esto

<select v-model="periodoLectivo" class="form-control col-md-12" @click="getPeriodoMalla()">
 <option v-for="periodo in arrayPeriodo" :key="periodo">{{periodo}}</option>
</select> 

a esto

<<select v-model="periodoLectivo" class="form-control col-md-12" @click="getPeriodoMalla()">
<option v-for="periodo in arrayPeriodo" :key="periodo.id">
    {{periodo.pAcademicoInicio }}  - {{ periodo.pAcademicoFin }} {{ periodo.cicloLectivoInicio }}
</option>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.