Vue radio single box, get the value of the current item and send the value to the background (self-test available)

Without further ado, go directly to the code:

<label v-for="(item,index) in radioData" :key="index">
      <input type="radio" :value="item.value" @click="getRadioVal(item.value)">    
      {{item.value}}
</label>

<script>
export default {
  data () {
    return {
      radioData:[
        {value: '5 years'.id:'5'},
        {value: 'ten years'.id:'10'},
        {value: 'in 20 years'.id:'20'},
        {value: 'Long term'.id:'30'}]}; },methods: {
    getRadioVal (value) {
        console.log(value); }}}</script>
Copy the code

2. Radio options that do not use the V-for loop

<template>
  <div>
    <label><input type="radio" value="01" @click="getRadioVal">5 years</label>
    <label><input type="radio" value="." @click="getRadioVal">Ten years</label>
    <label><input type="radio" value="3" @click="getRadioVal">20 years</label>
  </div>
</template>
<script>
export default {
  methods: {
    getRadioVal (event) { 
        let radioVal = event.target.value;  
        console.log(radioVal); }}}</script>
Copy the code

Click on each item to get the value of the current item. V-for has the same effect as no V-for

If you have any questions, please leave a message and the blogger will reply to you in the first time