Vuejs как сделать массив в checkbox

Question

Как сделать массив в checkbox, такую же как и в radio. То есть при клике на выбранный radio мы получаем данные name и age, как сделать такое же с chekbox'ами, то есть бы при выборе получали через li данные выбранного checkbox'a без кавычек и квадратных скобок

а так же сделать получить отдельный результат с суммой всех 'age' = xx

Мой код:

    var app = new Vue({
      el: '#app',
      data: {
        user: {}
      }
    });

    var app = new Vue({
        el: '#app1',
        data: {
            login:[]
        }
    });

<div id="app">
    <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>
    <span>Выбрано: {{user.name}} - {{user.age}}  </span>
</div>

<div id="app1">
    <input type="checkbox" value="Jhon" v-model="login">
    <label>Jhon</label><br>
      <input type="checkbox" value="Richard" v-model="login">
      <label>Richard</label><br>
      <input type="checkbox" value="Robert" v-model="login">
      <label>Robert</label><br>
      <input type="checkbox" value="Jack" v-model="login">
      <label>Jack</label><br>
      <span>Выбрано: {{login}}</span>
</div>


<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

Answer 1

Присваиваете значения для checkbox's, используя директиву v-bind:

  <input type="checkbox" v-bind:value="{name:'Jhon', age:22}" v-model="login">
  <label>Jhon</label><br>
  <input type="checkbox" v-bind:value="{name:'Richard', age:22}" v-model="login">
  <label>Richard</label><br>
  <input type="checkbox" v-bind:value="{name:'Robert', age:22}" v-model="login">
  <label>Robert</label><br>
  <input type="checkbox" v-bind:value="{name:'Jack', age:22}" v-model="login">
  <label>Jack</label><br>

Это позволит заносить в массив значения выбранных checkbox как объекты, а не строки(как у вас сейчас).

Имея массив выбранных объектов, для подсчета суммы age, можно создать вычисляемое свойство totalAges:

  computed: {
    totalAges() {
      let sum = 0;
      for (var i = 0; i < this.login.length; i++) {
        sum += this.login[i].age;
      }
      return sum
    }
  },

var app = new Vue({
  el: '#app',
  data: {
    user: {}
  }
});

var app = new Vue({
  el: '#app1',
  data: {
    login: [],
    checkBoxs: [{
        name: 'Jhon',
        age: 22
      },
      {
        name: 'Richard',
        age: 22
      },
      {
        name: 'Robert',
        age: 22
      },
      {
        name: 'Jack',
        age: 22
      }
    ]
  },
  computed: {
    totalAges() {
      let sum = 0;
      for (var i = 0; i < this.login.length; i++) {
        sum += this.login[i].age;
      }
      return sum
    }
  },
});

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <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>
  <span>Выбрано: {{user.name}} - {{user.age}}  </span>
</div>

<div id="app1">
  <template v-for="item in checkBoxs">
    <input type="checkbox" :id="item.name" v-bind:value="item" v-model="login">
    <label :for="item.name">{{ item.name }}</label>
    <br>
  </template>
  <span>Выбрано: {{login}}</span>
  <hr>
  <span>Total age: {{ totalAges }}</span>
</div>

БЛОГ НА HUSL

Vuejs как сделать массив в checkbox

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