Vue.js как убрать выбранный radio

Question

Интересует такой вопрос. Как вторым кликом по по радио убрать выделенную позицию radio

Вот мой код:

    var app = new Vue({
      el: '.app',
      data: {
        user: {},
          logins:[
              {name:'Jhon', age:11, price:1000},
              {name:'Richard', age:12, price:2000},
              {name:'Robert', age:13, price:3000},
              {name:'Jack', age:14, price:4000}
          ],
          selectedLogins:[],
      }
    });

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="row app">
  <div class="col-6">
    <div class="border p-3 h-100">
      <div class="font-weight-bold pt-2">Коробка</div>

      <input type="radio" v-bind:value="{name:'Tom', age:22}" v-model="user">
      <label>Tom</label>
      <br>
      <input type="radio" v-bind:value="{name:'Bob', age:25}" v-model="user">
      <label>Bob</label>
      <br>
      <input type="radio" v-bind:value="{name:'Sam', age:28}" v-model="user">
      <label>Sam</label>
      <br>

      <div class="font-weight-bold pt-2">Продукты</div>
      <template v-for="login in logins">
          <input type="checkbox" v-bind:value="login" v-model="selectedLogins">
          <label>{{login.name}}</label><br>
      </template>
    </div>
  </div>

  <div class="col-6">
    <div class="border p-3 h-100">
      <ul class="nav flex-column">
          <li class="nav-link">{{user.name}} {{user.age}}  </li>
          <li class="nav-link" v-for="login in selectedLogins">{{login.name}} - {{login.age}} - {{login.price}}
            <input type="checkbox" v-bind:value="login" v-model="selectedLogins">
          </li>
      </ul>
    </div>
  </div>

</div>

Так же в редакторе: https://jsfiddle.net/synapse3/aebjpsh1/1/

Для checkbox оказалось все просто, просто установил в конце результата его-же checkbox, и он естественно убирается. Как быть с радио, может поставить кнопку reset-redio, но не знаю как написать в vue.

Может кто поможет? Заранее спасибо

Answer 1

В вашем случае можно использовать метод:

 methods: {
    clearRadio() {
      this.user = {}
    }
  }

, который устанавливает свойству user пустой объект.

Рабочий пример:

var app = new Vue({
  el: '.app',
  data: {
    user: {},
    logins: [{
        name: 'Jhon',
        age: 11,
        price: 1000
      },
      {
        name: 'Richard',
        age: 12,
        price: 2000
      },
      {
        name: 'Robert',
        age: 13,
        price: 3000
      },
      {
        name: 'Jack',
        age: 14,
        price: 4000
      }
    ],
    selectedLogins: [],
  },
  methods: {
    clearRadio() {
      this.user = {}
    }
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="row app">
  <div class="col-6">
    <div class="border p-3 h-100">
      <div class="font-weight-bold pt-2">Коробка</div>

      <input type="radio" v-bind:value="{name:'Tom', age:22}" v-model="user">
      <label>Tom</label>
      <br>
      <input type="radio" v-bind:value="{name:'Bob', age:25}" v-model="user">
      <label>Bob</label>
      <br>
      <input type="radio" v-bind:value="{name:'Sam', age:28}" v-model="user">
      <label>Sam</label>
      <br>

      <div class="font-weight-bold pt-2">Продукты</div>
      <template v-for="login in logins">
          <input type="checkbox" v-bind:value="login" v-model="selectedLogins">
          <label>{{login.name}}</label><br>
      </template>
    </div>
  </div>

  <div class="col-6">
    <div class="border p-3 h-100">
      <ul class="nav flex-column">
        <li v-if="user.name" class="nav-link">{{user.name}} {{user.age}}
          <button class="btn btn-sm btn-danger" @click="clearRadio">clear radio</button>
        </li>
        <li class="nav-link" v-for="login in selectedLogins">{{login.name}} - {{login.age}} - {{login.price}}
          <input type="checkbox" v-bind:value="login" v-model="selectedLogins">
        </li>
      </ul>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Vue.js как убрать выбранный radio

Ответы (1 шт):