默认情况下未选中 Vue.js 单选按钮

Question

我想对v-for循环内的单选按钮进行默认检查。这是代码：

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

          <div>
            <div>
              Visibility: {{p.visible}}
            </div>                


            <strong>Visibility setting</strong><br>
            <input type="radio" v-model="p.visible" name="visibility" value="all" :checked="p.visible == 'all'"> All <br>
            <input type="radio" v-model="p.visible" name="visibility" value="fav" :checked="p.visible == 'fav'"> My favorites <br>
            <input type="radio" v-model="p.visible" name="visibility" value="none" :checked="p.visible == 'none'"> No one

          </div>
            <div><img" v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId" /> </div>
        </div>          


      </li>

      </ul>

我遵循了这个答案。

虽然我可以看到Visibility正在打印每个项目，但未按预期检查每张照片的默认单选按钮。

这photos是创建组件时我从服务器收到的数组：

   [ 
        {
            "id" : "5bcebb6efeaea3147b7a22f0",
            "imgId" : "12710.png",
            "visible" : "all"
        }, 
        {
            "id" : "5bcebbf0feaea3147b7a22f1",
            "imgId" : "62818.png",
            "visible" : "fav"
        }, 
        {
            "id" : "5bcec010feaea3147b7a22f2",
            "imgId" : "36740.png",
            "visible" : "none"
        }
    ],

这里有什么问题，我该如何解决？

Answer 1

不要使用:checked：

v-model将忽略在任何表单元素上找到的初始value,checked或selected属性。它将始终将 Vue 实例数据视为真实来源。您应该在 JavaScript 端data的组件选项内声明初始值。

如果v-model相同，value它将为该复选框返回 true。你的固定小提琴：

new Vue({
  el: '#app',
  data: {
    photos: [{
        "id": "5bcebb6efeaea3147b7a22f0",
        "imgId": "12710.png",
        "visible": "all"
      },
      {
        "id": "5bcebbf0feaea3147b7a22f1",
        "imgId": "62818.png",
        "visible": "fav"
      },
      {
        "id": "5bcec010feaea3147b7a22f2",
        "imgId": "36740.png",
        "visible": "none"
      }
    ],
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <ul v-for="(p, index) in photos">
    <li>

      <div>
        Visibility: {{p.visible}}
      </div>

      <strong>Visibility setting</strong><br>
      <input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="all"> All <br>
      <input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="fav"> My favorites <br>
      <input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="none"> No one

    </li>
  </ul>



</div>

现在每个广播组都有自己的name，并v-model以该组为目标（注意index）。