Problema con referencia dinamica


#1

Buenos dias, llevo unos dias pegandome cabezazos para resolver este problema pero no consigo resolverlo. Estoy haciendo un modulo de agenda y quiero poner dos timepicker por cada dia de la semana (hora de inicio y hora de fin), adicionalmente quiero añadirle la opción de añadir mas turnos por lo que no se cuantos timepicker pueden haber, como minimo 14. El caso es que he usado un bucle v-for para ir iterando sobre cada dia de la semana pero me da un error al intentar guardar el dato en el modelo por referencia.

El código lo tengo asi:

`

<v-menu
:ref="‘menuhorainicio’+index"

     <v-time-picker
         v-if="dia.menu2"
         v-model="dia.time"
        @change="$refs['menuhorainicio'+index].save(dia.time)"
    ></v-time-picker>

`

Y el error que me devuelve es el siguiente:

typeError: _vm.$refs[(“horainicio” + index)].save is not a function at click

¿Sabeis como puedo resolverlo?

Gracias de antemano.
Un saludo.


#2

Ejecutando esta linea se devuelve la funcion a ejecutar, o lo que quieres es ejecutar la misma on change? Si es lo segundo prueba asi:

@change="e => $refs['menuhorainicio'+index].save(dia.time)"

#3

22

Me sigue devolviendo el mismo error.


#4

Mi fallo, Vue ejecuta la expresion, no la evalua en el momento.

Basicamente te esta diciendo que $refs['menuhorainicio'+index] esta devolviendo algun valor que no contiene save como funcion. Haz un log de todo $refs en el hooh mounted para ver que es lo que queda registrado (elimin la linea conflictiva si no te permite verlo).

Te recomendaria sinembargo buscar mejor solucion, una con mas abstraccion y mas facil de mantener.


#5

Me pasa al tenerlo dentro de un bucle v-for, si lo saco fuera funciona correctamente. ¿Alguna idea?


#6

Puedes mostrar el codigo completo, con el v-for incluido? Y Ademas el codigo sin bucle que si te funciona?


#7
<v-expansion-panel-content v-for="(dia, index) in dias" :key="index">
                    <div slot="header">
                      <v-checkbox @change="clickSobreDia"
                            :label="dia.nombre"
                            color="teal"
                            v-model="dia.check"
                      ></v-checkbox>
                    </div>
                    <v-card>
                      <v-layout row wrap>
                        <v-flex xs6 sm6 lg6>
                          <v-menu
                                  ref="menu"
                                  lazy
                                  :close-on-content-click="false"
                                  v-model="dia.startTimeMenu"
                                  transition="scale-transition"
                                  offset-y
                                  full-width
                                  :nudge-bottom="-24"
                                  max-width="290px"
                                  :return-value.sync="dia.startTime"
                          >
                            <v-text-field
                                    slot="activator"
                                    label="Hora de Inicio"
                                    v-model="dia.startTime"
                                    append-icon="access_time"
                                    readonly
                            ></v-text-field>
                            <v-time-picker v-model="dia.startTime" format="24hr">
                              <v-spacer></v-spacer>
                              <v-btn flat color="primary" @click="dia.startTimeMenu = false">Cancel</v-btn>
                              <v-btn flat color="primary" @click="$refs.menu.save(dia.startTime);">OK</v-btn>
                            </v-time-picker>
                          </v-menu>
                        </v-flex>
                    </v-card>
                  </v-expansion-panel-content>

#8

Ok, y el codigo con el $refs.menuhorainicio, etc?


#9

Es el mismo, lo que pasa es que en lugar de menuhorainicio+index, lo he dejado en menu solo a medida que he ido haciendo pruebas, quiero primero que me funcione para uno y luego ya lo monto añadiendo el indice.


#10

Ok, prueba a sustituir el @click="$refs.menu.save(dia.startTime); por @click="saveTime(dia.startTime)" y añade el metodo

saveTime (time) {
  this.$refs.menu.save(time)
}

Dime si de esa manera hay algun cambio.


#11

mismo error: [Vue warn]: Error in event handler for “click”: “TypeError: this.$refs.menu.save is not a function”


#12

Aunque ref registre el componente, este no es iniciado inmediatamente y acceder a sus metodos puede no ser tan sencillo, como en tu caso. Te recomendaria crearas un componente que englobe v-menu y sus childs y que tenga como prop dia. Cualquier logica mantenla en ese componente y si se tiene que comunicar con el parent, que emita algun evento.