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!
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))