[Documentation] add v-model example to radio buttons

[cadilhac]

Environment

Browsers: Chrome 117.0.0.0
OS: Windows 10

Steps to reproduce

Check the first example in Usage section.

Expected Behavior

1. v-model should be used in the sample since it is the subject (with radio groups) of this section.
2. The sample should be fixed so that it works with integer values (:value="1" instead of value="1")
3. A label could be added to show the selected value of the model.

Actual Behavior

v-model is not used in the sample. No radio is selected by default. If v-model was used as explained in the doc, the example would not work for integer values.

Reproduction Link

https://vuetifyjs.com/en/components/radio-buttons/

[MajesticPotatoe]

usage examples are sudo-automated simple examples, they don't have the ability to display what you are asking; That would be reserved for a regular example (we often create an example for v-model for such occasions)

as for the whole integer value ordeal, its valid either way, either string or integer, and would be up to the developer which they want to use, however to clear up some confusion, we can adjust the value present.

[cadilhac]

as for the whole integer value ordeal, its valid either way

I don't understand. My model is set to ref(1), not to ref('1'). If I use value="1", then the radio button is not selected. If I use :value="1" then it is.

[MajesticPotatoe]

va

as for the whole integer value ordeal, its valid either way

I don't understand. My model is set to ref(1), not to ref('1'). If I use value="1", then the radio button is not selected. If I use :value="1" then it is.

If you set your model to ref('1') it would work with value="1"
Its a vue thing and understanding what binding a prop does. whateverProp="someValue" is always evaluated as a string, :whateverProp="someValue" will evaluate as javascript (which if its 1, would be an integer, and '1' would be a string)

model-value of v-radio-group accepts string and integer values
value of v-radio can also be string or integer depending on a developers purpose, value="1" is valid just as much as value="one" or :value="1"

[cadilhac]

You are right and I understand all this already, especially because I now work on Vue for several weeks.
I was just saying that if I had read this example while being completely new to Vue and reactive stuff, I would have written v-model="var", value="1" and const var=ref(1) and it would not work. Since, to my mind, the sample was a bit poor, I thought it needed some more completeness with a model value. And when I see in the current sample an integer, it seems intuitive to also have a ref as an integer, thus my initial reaction to correct it as :value instead of value and use ref(1). Just saying...

[MajesticPotatoe]

i get ya, the issue isn't closed and I assigned myself to it.
I'm working on an update to reduce said confusion, and adding an example to address such concern as I stated.

[MajesticPotatoe]

resolved 325ddd3