Radiobutton v-model example

[Jeff Butterworth]

Can you please provide an example of how to use v-model with radio buttons?

I found this thread: https://www.syncfusion.com/forums/159600/v-model-doesnt-work-in-radiobutton but the code part isn't visible. following the support request through, it says was fixed but I don't understand what the syntax should be and the documentation doesn't have any examples.

hanks

Jeff 

[Gayathri KarunaiAnandam]

Hi Jeff, 

We have checked your reported query. We have prepared a sample based on  your requirement. Please check the code snippet and sample. 

<template> 

  <div id="app"> 

    <ul> 

      <li> 

        <ejs-radiobutton 

          label="Male" 

          name="default" 

          v-model="picked" 

          :htmlAttributes="{ value: 'Male' }" 

        ></ejs-radiobutton> 

      </li> 

      <li> 

        <ejs-radiobutton 

          label="Female" 

          name="default" 

          v-model="picked" 

          :htmlAttributes="{ value: 'Female' }" 

        ></ejs-radiobutton> 

      </li> 

    </ul> 

    <p>The Selected gender are: {{ picked }}</p> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { enableRipple } from "@syncfusion/ej2-base"; 

import { RadioButtonPlugin } from "@syncfusion/ej2-vue-buttons"; 

 

Vue.use(RadioButtonPlugin); 

 

enableRipple(false); 

 

export default Vue.extend({ 

  data: function () { 

    return { 

      picked: "Male", 

    }; 

  }, 

}); 

</script> 

 

 

 

Sample: https://codesandbox.io/s/vue-template-forked-qigwl?file=/src/components/App.vue   

We are improving our documentation. We will include this sample in our documentation which will be available in any of our upcoming release. 

Regards, 

Gayathri K