JSFiddle - React, Tailwind, and code Playground

by khamer

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>

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]
    },
  },
})