Dynamic radio button in vue or bind with respective object


Hello guys!!
As seen in pic , each object has three radio btn ( m using bootstraps) issue is when I click on row one’s any radio btn and again I click on second rows radio btn it get changes. This is wat I don’t want . I want radio btn independent of each object…:+1:

I need to watch your code.

Maybe your binded object have some problems.

Generally, If you make it like below, the radio input will work normally.

example code

<template>
  <div class="hello">
    <div v-for="testObject in testObjects">
      {{ testObject.msg }}
        one <input type="radio" value="one" v-model="testObject.radioValue">
        two <input type="radio" value="two" v-model="testObject.radioValue">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      testObjects: [
        {
          msg: 'test',
          radioValue: false
        },
        {
          msg: 'test2',
          radioValue: false
        }
      ]
    }
  }
}
</script>

Maybe you copy-pasted a bootstrap example with the name attribute set on your radio buttons?
If all the radio buttons would have to have the same name, they are considered by the browser to be of the same radio-button-group and therefore only 1 button of all the buttons would be able to be selected and vice-versa selecting any of the buttons would de-select any previous selected button.