CODEWITHSUNDEEP
vue.js
Rezaul karim
Rezaul karim

Reputation: 85

How to get radio button value from multiple radio button with same v-model name?

How can I get the value from my multiple radio button by same v-model name?
I expect I can check only one button for each student and put its value into the info[] array.

new Vue({
  el: "#app",
  data: {
    info: [],
    student_id: [
      { name: 'Andrew', student_id: '52346' },
      { name: 'Mathew', student_id: '86975' },
      { name: 'Max', student_id: '78654' },
      { name: 'Jhon', student_id: '36589' },
      { name: 'Flam', student_id: '74859' },
      { name: 'Meli', student_id: '62398' }
    ]
  },
  methods: {
    submit() {
      console.log(this.info)
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<div id="app">
  <v-container>
    <form @submit.prevent="submit">
      <div v-for="(id,i) in student_id" class="pa-3">
        <span class="blue--text">{{id.name}}</span>
        <br />
        <input type="radio" :name="`${id.name}`" v-model="info" :value="`${id.student_id}-P`" /> Present
        <input type="radio" v-model="info" :name="`${id.name}`" :value="`${id.student_id}-A`" /> Absent
        <input type="radio" v-model="info" :name="`${id.name}`" :value="`${id.student_id}-L`" /> Late
        <hr />
      </div>
      <v-btn color="success" type="submit">Submit</v-btn>
    </form>
  </v-container>
</div>

View on JSFiddle

Upvotes: 3

Views: 1928

Answers (1)

sugars
sugars

Reputation: 1493

new Vue({
  el: "#app",
  data: {
    student_id: [{
        name: 'Andrew',
        student_id: '52346',
        value: ''
      },
      {
        name: 'Mathew',
        student_id: '86975',
        value: ''
      },
      {
        name: 'Max',
        student_id: '78654',
        value: ''
      },
      {
        name: 'Jhon',
        student_id: '36589',
        value: ''
      },
      {
        name: 'Flam',
        student_id: '74859',
        value: ''
      },
      {
        name: 'Meli',
        student_id: '62398',
        value: ''
      }
    ]
  },
  computed: {
    info() {
      return this.student_id.map(item => item.value)
    }
  },
  methods: {
    submit() {
      console.log(this.info)
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <v-container>
    {{info}}
    <form @submit.prevent="submit">
      <div v-for="(id,i) in student_id" class="pa-3">
        <span class="blue--text">{{id.name}}</span>
        <br />
        <input type="radio" :name="`${id.name}`" v-model="id.value" :value="`${id.student_id}-P`" /> Present
        <input type="radio" v-model="id.value" :name="`${id.name}`" :value="`${id.student_id}-A`" /> Absent
        <input type="radio" v-model="id.value" :name="`${id.name}`" :value="`${id.student_id}-L`" /> Late
        <hr />
      </div>

      <v-btn color="success" type="submit">Submit</v-btn>
    </form>
  </v-container>
</div>
Put the value of each radio group in the object in the array, and then calculate the selected value by computed.

Upvotes: 3

Related Questions