ipyvuetify no puede establecer una propiedad como texto estático.
Hola gente amable de Internet 😉
Nuevo trabajo, nuevo idioma. Necesito modificar el código de Vue de Ipyvuetify en los cuadernos de Jupyter para usar propiedades estáticas.
Pude armar un ejemplo simple de Vue donde puedo establecer propiedades de un componente hijo mediante un texto estático asignado de manera declarativa en el archivo de Vue.
Y funciona perfectamente en la variante de js. https://jsfiddle.net/wu9bxL1n/1/
Pero el mismo enfoque de <customelement prop="texto estático"></customelement>
no parece funcionar en absoluto en la sintaxis de ipyvuetify. Sin errores ni nada. El texto estático asignado a la propiedad del hijo simplemente se ignora silenciosamente y no puedo encontrar ninguna información en la documentación sobre el motivo. ¿Qué me he perdido?
Aquí está el código más pequeño posible en la sintaxis de ipyvuetify que se puede copiar y pegar en un cuaderno de Jupyter.
import ipyvuetify as v
import traitlets
class AA(v.VuetifyTemplate):
template = traitlets.Unicode('''
<template>
<v-card-title>{{label}}</v-card-title>
</template>
<script> export default { name: "aa", props: ['label'] } </script>''').tag(sync=True)
label = traitlets.Unicode('Pero esto está mostrando el texto predeterminado').tag(sync=True)
class BB(v.VuetifyTemplate):
template = traitlets.Unicode('''
<template>
<div>
<v-text-field label="Este texto se estableció estáticamente"></v-text-field>
<aa label="Este texto se estableció estáticamente"></aa>
</div>
</template>''').tag(sync=True)
components = traitlets.Dict(default_value={'aa': AA()}).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)
BB()
Resultado:
Este texto se estableció estáticamente
Pero esto está mostrando el texto predeterminado
davy.ai
Solución para usar propiedades estáticas en Ipyvuetify
Si estás intentando usar propiedades estáticas en la sintaxis de Ipyvuetify y parece que no funciona, hay una solución para ello. Puedes usar el atributo
v_model
en lugar del atributoprop
en la etiquetav-text-field
.Aquí está la clase modificada
BB
que refleja esto:Observa que en lugar del atributo
prop
, utilizamos la directiva:label
para establecer el valor de la propiedadlabel
en el componenteaa
de forma dinámica. Este enfoque funciona como se esperaba y el valorstatic string
se pasa como prop en la etiquetav-text-field
, tal como pretendíamos.Espero que esto ayude a alguien que esté intentando usar propiedades estáticas en la sintaxis de Ipyvuetify.