Radio buttons not work in template editor vue (not save)

[Marco]

<template>

<table class="custom-event-editor" width="50%" cellpadding="5">

<tbody>

<tr>

<td class="e-textlabel">Asunto</td>

<td colspan="6">

<input id="Subject" class="e-field e-input" type="text" name="Subject" style="width: 100%" />

</td>

<td></td>

<td></td>

</tr>

<tr>

<td class="e-textlabel">Fecha inicio</td>

<td colspan="6">

<input id="StartTime" class="e-field" type="text" name="StartTime" />

</td>

<td class="e-textlabel">Fecha fin</td>

<td colspan="6">

<input id="EndTime" class="e-field" type="text" name="EndTime" />

</td>

</tr>

<tr>

<td class="e-textlabel">Consultorios</td>

<td colspan="6">

<input type="text" id="ConferenceId" name="ConferenceId" class="e-field" style="width: 100%" />

</td>

<td></td>

<td></td>

</tr>

<tr>

<td class="e-textlabel">Descripción</td>

<td colspan="6">

<textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" style="width: 100%; height: 60px !important; resize: vertical"></textarea>

</td>

<td></td>

<td></td>

</tr>

<tr>

<td class="e-textlabel"></td>

<td colspan="6">

<input type="radio" class="e-field" name="pro_check2" @change="mostrarCamposExtra('registrado')" :checked="existePropietario == 'registrado'" > Propietario registrado

</td>

<td class="e-textlabel"></td>

<td colspan="6">

<input type="radio" class="e-field" name="pro_check2" @change="mostrarCamposExtra('nuevo')" :checked="existePropietario == 'nuevo'"> Propietario nuevo

</td>

</tr>

<tr>

<td class="e-textlabel">Propietario</td>

<td colspan="6">

<input type="text" class="e-field" id="pro_nombre" name="pro_nombre">

</td>

<td></td>

<td></td>

</tr>

<tr>

<td class="e-textlabel">Email</td>

<td colspan="6">

<input type="text" class="e-field" name="pro_email">

</td>

<td class="e-textlabel">Teléfono</td>

<td colspan="6">

<input type="text" class="e-field" name="pro_telefono">

</td>

</tr>

<tr>

<td class="e-textlabel">Paciente</td>

<td colspan="6">

<input type="text" class="e-field" name="pro_paciente">

</td>

<td class="e-textlabel">Sexo</td>

<td colspan="6">

<input type="text" class="e-field" name="pro_sexo">

</td>

</tr>

<tr>

<td class="e-textlabel">Edad</td>

<td colspan="6">

<input type="text" class="e-field" name="pro_edad">

</td>

<td class="e-textlabel">Fecha de nacimiento</td>

<td colspan="6">

<input type="text" class="e-field" name="pro_nacimiento">

</td>

</tr>

</tbody>

</table>

</template>

<script lang='js'>

import Vue from "vue";

import { DateTimePickerPlugin } from '@syncfusion/ej2-vue-calendars';

import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';

import { MultiSelectPlugin } from '@syncfusion/ej2-vue-dropdowns';

Vue.use(DropDownListPlugin);

Vue.use(DateTimePickerPlugin);

Vue.use(MultiSelectPlugin);

export default {

data() {

return {

val2: '',

existePropietario: ''

}

},

methods: {

mostrarCamposExtra(respuesta){

console.log("RESPUESTA")

console.log(respuesta)

if(respuesta === 'nuevo'){

this.existePropietario = 'nuevo'

console.log('nuevo propietario')

}else{

this.existePropietario = 'registrado'

console.log('ya existe el propietario')

}

}

},

}

</script>

<style lang="">

#Schedule_dialog_wrapper{

width: 578px !important;

}

</style>

[Nevitha Ravi]

Hi Marco, 

We have checked your code in which value is not defined and assigned properly which is the cause for the issue. Kindly refer the following sample for the same. 

http://www.syncfusion.com/downloads/support/forum/144065/ze/Sample-480108841  

            <tr> 

                <td colspan="6"> 

                <ejs-radiobutton ref="radioObj" label=" Propietario registrado" class="e-field" name="pro_check2" checked='true' value="Pro"></ejs-radiobutton></li> 

                </td> 

                <td class="e-textlabel"></td> 

                <td colspan="6"> 

                   <ejs-radiobutton ref="radioObj" label="Propietario nuevo" class="e-field" name="pro_check2" value="nuevo"></ejs-radiobutton></li> 

                </td> 

            </tr> 

onActionBegin: function(args) { 

      let scheduleObj = this.$refs.ScheduleObj; 

      if (args.requestType === "eventCreate" || args.requestType === "eventChange") { 

        let data; 

        if (args.requestType === "eventCreate") { 

          data = args.data[0]; 

        } else if (args.requestType === "eventChange") { 

          data = args.data; 

        } 

        let radioObj = document.querySelectorAll('.e-radio'); 

        radioObj.forEach((radio) => { 

          let myRadioObj = radio.ej2_instances[0]; 

            if (myRadioObj.checked) { 

              data.pro_check2 = myRadioObj.value; 

            } 

        }); 

    } 

Regards, 

Nevitha 

45

[Marco]

ERROR IN CONSOLE..... 

I download your example....
i make, npm install
and npm run dev.... 

vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "TypeError: str.replace is not a function"

found in

--->

        at src/App.vue

         

warn @ vue.esm.js?efeb:628

[Nevitha Ravi]

Hi Marco, 

Sorry for the inconvenience caused. 

Can you please check the following sample link which works properly and revert us back if you need any further assistance. 

http://www.syncfusion.com/downloads/support/forum/144065/ze/Sample1005383968  

Regards, 

Nevitha.