Vue.js 如何在 v-for 循环中使用单选按钮答案

【问题标题】：Vue.js how to use radio buttons inside v-for loopVue.js 如何在 v-for 循环中使用单选按钮
【发布时间】：2018-10-23 07:08:20
【问题描述】：

我正在尝试使用单选按钮，以便用户可以选择其中一张照片作为他们的个人资料照片：

<ul v-for="p in myPhotos">
  <li>
    <div>
      <div>
        <div>
          photo id: {{p.imgId}}
        </div>
        <input type="radio" 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>

这些值是这样获取的：

created () {
  axios.get(this.BASE_URL + '/profile/g/myphotos/', this.jwt)
  .then( res => {
    this.myPhotos = res.data.photos;
    this.showUploadedPhoto = true;
    this.profileImg = res.data.profileImg
  })
  .catch( error => {
    console.log(error);
  })
},

选择照片后，profileImg 变量应设置为该照片的 imgId。

问题是如何让用户在这个 v-for 循环中只选择一张照片作为头像？

更新：我正在迭代的 myPhotos 对象的照片：

【问题讨论】：

标签： vue.js

【解决方案1】：

通过提供名称，您可以将其视为一个元素

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>

【讨论】：

你能像我们一样分享一个 sn-p 并分享什么不起作用吗？
@Babr：正如你所说，在这里你一次只能选择一张图片。不是吗？
是的，我想一次只选择一张图片，但还想在点击时为其赋值profileImg。
是的，如果您运行代码 sn -p，您将看到 profileImg 已更新

【解决方案2】：

如何为输入字段设置name属性

 <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>

【讨论】：

这有助于选择单个项目，但是当单击某个项目时如何将profileImg 设置为p.imgId？