es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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

Tags:  , , ,

Answer

  1. Avatar for 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 atributo prop en la etiqueta v-text-field.

    Aquí está la clase modificada BB que refleja esto:

    class BB(v.VuetifyTemplate):
        template = traitlets.Unicode('''
        <template>
        <div>
          <v-text-field label="Este texto fue establecido estáticamente" v_model="static string"></v-text-field>
          <aa :label="'Este texto fue establecido dinámicamente'"></aa>
        </div>
        </template>''').tag(sync=True)
    
        components = traitlets.Dict(default_value={'aa': AA()}).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)
    
    BB()
    

    Observa que en lugar del atributo prop, utilizamos la directiva :label para establecer el valor de la propiedad label en el componente aa de forma dinámica. Este enfoque funciona como se esperaba y el valor static string se pasa como prop en la etiqueta v-text-field, tal como pretendíamos.

    Espero que esto ayude a alguien que esté intentando usar propiedades estáticas en la sintaxis de Ipyvuetify.

Comments are closed.