Vue.js how to use radio buttons inside v-for loop

Question

I\'m trying to use radio buttons, so that users can choose one of the photos as their profile photo:

  

    <         


        

Answer 1

By providing name you can treat it as one element

var app = new Vue({
  el:"#app",
  data:{
    images:[{imgId:1},{imgId:2},{imgId:3}],
    profileImg:2
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
  <div v-for="image in images">
              <input type="radio" v-model="profileImg" name="profileImg" :value="image.imgId"> Choose as profile image
  </div>
  You have selected : {{profileImg}}
 </div>
</div>

Answer 2

How about setting name attribute for the input field

 <ul v-for="p in myPhotos">
    <li>
      <div>

      <div>
        <div>
          photo id: {{p.imgId}}
        </div> 
          <input type="radio" name="user_profile_photo" v-model="profileImg" :value="p.imgId"> Choose as profile image
      </div>
        <div><img v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId" /> </div>
    </div>
      </li>

  </ul>