0

Tengo un formulario dinamico que se crea con vue, todo bien hasta aqui, ahora bien, he agregado un evento @change con el metodo setDependencyVisibility y lo que pasa es muy extraño;

Si pulso 1 vez sobre cualquiera de los radio buttons la marca (circulo que aparece dentro del radio button) que indica que ese radio esta activo aparece 1ms y desaparece, para que se vea el marcador debo pulsarlo 2 veces.

Método setDependencyVisibility

setDependencyVisibility() {
    for (let field in this.fields_repository) {
        if (this.fields_repository[field].has_dependency == '1') {
            for (let index in this.fields_repository) {
                if (this.fields_repository[index].id == this.fields_repository[field].dependency.form_meta_data_id_on_who_depends) {
                    const radioGroup = document.querySelectorAll(`input[name="${this.fields_repository[index].name}"]`);
                    radioGroup.forEach(radio => {
                        if (radio.value == this.fields_repository[field].dependency.true_value) {
                            if (radio.checked === true) {
                                this.fields_repository[field].dependency.show = true;
                            } else {
                                this.fields_repository[field].dependency.show = false;
                            }
                        }
                    });
                }
            }
        }
    }
}

Contenido de fields_repository

fields_repository:Object
0:Object
    dependency:Object
        show:true
    has_dependency:"0"
    id:57
    length:25
    name:"tiene_trabajo"
    options:Array[2]
    required:false
    type:"radio"
1:Object
    dependency:Object
        form_meta_data_id:58
        form_meta_data_id_on_who_depends:57
        id_depending_field:3
        show:true
        true_value:"si"
    has_dependency:"1"
    id:58
    length:99999
    name:"salario"
    required:false
    type:"number"
2:Object
    dependency:Object
        form_meta_data_id:59
        form_meta_data_id_on_who_depends:57
        id_depending_field:4
        show:true
        true_value:"no"
    has_dependency:"1"
    id:59
    length:25
    name:"quien_lo_mantiene"
    required:false
    type:"text"

HTML

<label>{{field.name.replace(/_/g, ' ')}}</label>
<span v-for="(option,option_index,key) in field.options">
    <input type="radio"
           :checked="option.default == 1"
           :value="option.option_value"
           :name="field.name"
           :id="field.name + option_index"
           @change="setDependencyVisibility()"
           required>

    <label :for="field.name + option_index">{{option.option_value}}</label>
</span>

conociendo el método que se activa cada vez que un radio cambia de estado, cabe resaltar que el problema radica en el ultimo if del metodo setDependencyVisibility

 if (radio.value == this.fields_repository[field].dependency.true_value) {
     if (radio.checked === true) {
         this.fields_repository[field].dependency.show = true;
     } else {
         this.fields_repository[field].dependency.show = false;
     }
 }

El comportamiento inusual desaparece cuando elimino ese fragmento.

Mi objetivo final es hacer campos dependientes de radio buttons, pero los formularios son dinámicos, en su totalidad, a tal punto que la aplicación tiene un constructor de formularios.

1 respuesta 1

0

He resulto el problema, por alguna razon en el HTML el atributo :checked="option.default == 1" es el que provoca este comportamiento inusual.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.