选中的 Vue.js 默认单选按钮不起作用 [英] Vue.js default radio button checked does not work

查看：53
本文介绍了选中的 Vue.js 默认单选按钮不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 
    <li><div class="row"><div class="col-sm-6"><div>可见性:{{p.visible}}

<br><br><strong>可见性设置</strong><br><input type="radio" v-model="p.visible" name="visibility" value="all" :checked="p.visible == 'all'">所有 <br><input type="radio" v-model="p.visible" name="visibility" value="fav" :checked="p.visible == 'fav'">我的最爱 <br><input type="radio" v-model="p.visible" name="visibility" value="none" :checked="p.visible == 'none'">没有人

<div class="col-sm-6"><img class="img-responsive myphotos" v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId"/>

我关注了这个答案.

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

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

<预><代码> [{"id": "5bcebb6efeaea3147b7a22f0","imgId": "12710.png",可见":全部"},{"id": "5bcebbf0feaea3147b7a22f1","imgId": "62818.png",可见":最爱"},{"id": "5bcec010feaea3147b7a22f2","imgId": "36740.png",可见":无"}],

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

解决方案

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

new Vue({el: '#app',数据: {我的照片: [{_id":1，"imgId": "12710.png",可见":全部"},{"_id": 2,"imgId": "62818.png",可见":最爱"},{"_id": 3,"imgId": "36740.png",可见":inv"}]},方法: {改变(e){//console.log(e.target.id)e.target.disabled = true}}})

<头><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/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwgnJ8ER"cross;<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script><身体><div id="应用程序"><ul v-for="p,i in myPhotos"><li><div class="row"><div class="col-sm-6"><div>可见性:{{p.visible}}

<br><br><strong>可见性设置</strong><br><input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="all" :checked="p.visible == 'all'">所有 <br><input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="fav" :checked="p.visible == 'fav'">我的最爱 <br><input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="none" :checked="p.visible == 'none'">没有人

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

I'd like to make default checked on radio buttons. Here is the code:

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

I followed this answer.

While see Visibility of each item being printed, the default is not checked as expected.

Here is the myPhotos which I receive from the server when the component is created:

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

What is wrong here and how can I fix it?

解决方案

in your tried code you have only one radio buttons group with the same name visibility , in our case we need 3 groups so we need 3 different names , to do that we have to add i index to our v-for loop and bind each group name with that index like :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>

这篇关于选中的 Vue.js 默认单选按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆