Vue.js default radio button checked does not work

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

Vue.js default radio button checked does not work

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

174 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:21:31+0000

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>

Categories

Vue.js default radio button checked does not work

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags