选中的 Vue.js 默认单选按钮不起作用答案

【问题标题】：Vue.js default radio button checked does not work选中的 Vue.js 默认单选按钮不起作用
【发布时间】：2019-03-29 04:39:48
【问题描述】：

我想对单选按钮进行默认检查。代码如下：

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

          <div class="col-sm-6">
            <div>
              Visibility: {{p.visible}}
            </div>                

            <br>
            <br>
            <strong>Visiblity 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 class="col-sm-6"><img class="img-responsive myphotos" v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId" /> </div>
        </div>          


      </li>

      </ul>

我关注了this的回答。

虽然看到正在打印的每个项目的Visibility，但未按预期检查默认值。

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

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

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

【问题讨论】：

请提供您的数据对象
@BoussadjraBrahim 我添加了数据对象。
我试过了，但我得到了错误：ObjectId is not defined
嗯，我是直接从 mongodb 复制的。我在应用程序中收到的是id 而不是_id。请查看修改后的问题。
可以通过将 _id:1 设置为 _id:3 来避免这种情况，我正在测试您的代码以找出问题

标签： vue.js radio-button

【解决方案1】：

在您尝试过的代码中，您只有一个名称相同的单选按钮组 visibility，在我们的例子中，我们需要 3 个组，所以我们需要 3 个不同的名称，为此我们必须将 i 索引添加到我们的 @ 987654323@ 循环并将每个组名与该索引绑定，例如:name="'visibility'+i"

new Vue({
  el: '#app',
  data: {
    myPhotos: [{
        "_id": 1,
        "imgId": "12710.png",
        "visible": "all"
      },
      {
        "_id": 2,
        "imgId": "62818.png",
        "visible": "fav"
      },
      {
        "_id": 3,
        "imgId": "36740.png",
        "visible": "inv"
      }
    ]

  },
  methods: {
    change(e) {
      //   console.log(e.target.id)
      e.target.disabled = true
    }

  }

})

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <ul v-for="p,i in myPhotos">
      <li>
        <div class="row">

          <div class="col-sm-6">
            <div>
              Visibility: {{p.visible}}
            </div>

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

          </div>
          <div class="col-sm-6"><img class="img-responsive myphotos" /> </div>
        </div>


      </li>

    </ul>
  </div>
</body>

【讨论】：

这确实弄乱了按钮值。例如，当单击My favorites 时，所有v.visible 值都设置为fav。请注意，有几张照片，每张照片都有自己的Visibility setting。
@Babr 我的回答出了什么问题，如果给定的代码影响另一个，你可以发布一个新问题或更新这个