1

Estoy haciendo un pequeño proyecto usando VueJS. Básicamente tengo un componente que incluye un botón, texto y un slot para poner más componentes dentro. Este componente recibe algunos props.

Cuando el botón se pulsa, mediante el método onclick, me gustaría enviar a una función escrita en JavaScript uno de los props (en ese caso, una id). Cuando eso ocurre, el div con dicho id se esconde o muestra (usando el toggle() de JQuery). El código funciona si yo especifico en el código la id, pero no funciona si yo envío el prop que, teóricamente, tiene el mismo valor. Adjunto algo de código para que se vea mejor.

Estos son los props:

props: {'obraName': String, 'idValue': String},

Esta es la plantilla del componente donde está el botón, y con el onclick, ejecuto la función JavaScript enviando el prop como parámetro:

<div :style="style">
      <label :style="text">{{obraName}}</label>
      <!-- Si, en vez de this.idValue pongo un número, funciona -->
      <button onclick='toggleListShow(this.idValue)'>x</button> 
      <div :style="text"><slot></slot></div>
</div>

Esta es la función JavaScript, usa JQuery:

function toggleListShow(id) {
    $('#obra' + id + " div").toggle()
}

Finalmente, el componente lo declaro mediante un echo en PHP. Pongo otros componentes dentro del slot y, más adelante, lo cierro. Aquí declaro tanto la id (que será obra + id de la obra), y el prop id-value (que solo tiene el id de la obra):

echo "<obra obra-name=".$obra['name']." id=".'obra'.$obra['id']." id-value=".$obra['id'].">";

Llevo un buen rato intentando que esto funcione, y agradecería muchísimo si me pudierais ayudar a encontrar el error que hace que no pueda enviar el prop idValue (declarado en el PHP como id-value) a mi función JavaScript.

¡Muchísimas gracias!

1
  • El primer error que veo es que cuando llamas a una prop desde el template, no debes usar el objeto this. Asi que retiralo de ahi. Por otro lado, tal vez la forma de definir props es correcta, la desconozco, pero en vue 2 y 3 me funciona sin problemas declarar un array asi: props: ['obraName', 'idValue']. Con esa declaracion, y llamando a {{idValue}} en el template deberia funcionar (habria que ver igual, si el div con id #obra ya existe al momento de ejecutar la funcion jquery (sino daria error al no encontrar el elemento))
    – Agustin G.
    el 4 sep. 2021 a las 14:05

0

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.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.