JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<div id="root">
  <div v-for="(v, i) in fooValues" :key="`foo${i}`">
    <label :for="`foo${i}`">foo {{ i }}</label>
    <input type="radio" :id="`foo${i}`" :value="v" v-model="foo">
  </div>
  
  foo: {{ foo }}
  
  <hr>
  
  <div v-for="(v, i) in barValues" :key="`bar${i}`">
    <label :for="`bar${i}`">bar {{ i }}</label>
    <input type="radio" :id="`bar${i}`" :value="v" v-model="bar">
  </div>
  
   bar: {{ bar }}
   
   <hr>
  
  <div v-for="(v, i) in binValues" :key="`bin${i}`">
    <label :for="`bin${i}`">bin {{ i }}</label>
    <input type="radio" :id="`bin${i}`" :value="i" v-model="bin">
  </div>
  
  bin: {{ bin }} computedBin: {{ computedBin }}
</div>

CSS

/* 
foo in the fiddle is showing the original bug - Vue doesn't care how many radios you make or if they're redundant, it's determining whether to show a radio as checked solely based on comparing the value of v-model with the  value of the value attribute

bar in the fiddle shows the quick hack I recommended to Tristan when he was working with checkboxes; since new Number(2) !== 2 they're treated as different values, but turns out Vue treats all objects as equal to each other, so while that works for telling bar 1 and bar 2 apart, it thinks bar 2 and bar 3 are the same.

Lastly, bin in the fiddle is the right way to do this - use a value you know as unique for the value attributes - so for example, the array index (i) and then use a computed property or such to map to the real value. 
*/

Vue

new Vue({
	el: '#root',
	data: {
  	foo: null,
    bar: null,
    bin: null,
    
    fooValues: [
    	1, 2, 2,
    ],
    
    barValues: [
    	1, 2, new Number(2), new Number(2),
    ],
    
    binValues: [
      1, 2, 2,
    ]
  },
      
  computed: {
    computedBin() {
      return this.binValues[this.bin]
    },
  },
})