Переключатель по умолчанию для Vue.js не работает - PullRequest
Новая
       1

Переключатель по умолчанию для Vue.js не работает

0 голосов
/ 24 октября 2018

Я бы хотел установить флажки по умолчанию для переключателей.Вот код: 

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

Я следовал этот ответ.

Хотя см. Visibility каждого печатаемого элемента, значение по умолчанию не проверяется должным образом.

Вот myPhotos, который я получаю от сервера при создании компонента: 

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

Что здесь не так и как я могу это исправить?

1 Ответ

0 голосов
/ 24 октября 2018

в вашем проверенном коде у вас есть только одна группа переключателей с одинаковым именем visibility, в нашем случае нам нужно 3 группы, поэтому нам нужно 3 разных имени, для этого нам нужно добавить индекс i к нашему v-for Зациклите и свяжите каждое имя группы с этим индексом, например :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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...