Vue.JS Как реализовать вывод checkbox'a статична а не из массива
Интересует такой момент, с VueJS только начинаю знакомиться. Помогите сделать вывод checkbox из html а не из массива.
В моем случае, выборка input=radio работает по средствам html, есть на пример 3 radio которые прописаны в html И есть допустим 4 checkbox'a но они прописаны в массиве и выводятся циклом КАК сделать checkbox'ы вывод как и radio из html ?
Вот мой код:
var app = new Vue({
el: '.app',
data: {
user: {},
totalAges: 0,
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 = {},
this.sumTotalAge();
},
sumTotalAge(){
this.totalAges = this.selectedLogins.reduce((acc,item) => acc += item.age, 0) + (this.user.age ? this.user.age : 0);
}
},
});<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/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" v-on:change="sumTotalAge">
<label>Tom</label>
<br>
<input type="radio" v-bind:value="{name:'Bob', age:25}" v-model="user" v-on:change="sumTotalAge">
<label>Bob</label>
<br>
<input type="radio" v-bind:value="{name:'Sam', age:28}" v-model="user" v-on:change="sumTotalAge">
<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" v-on:change="sumTotalAge">
<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 py-0 btn-danger" @click="clearRadio">x</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" v-on:change="sumTotalAge">
</li>
</ul>
<hr>
<span class="pl-3">Total age: {{ totalAges }}</span>
</div>
</div>
</div>Так же в редакторе: https://jsfiddle.net/synapse3/7tw0m6gy/3/
Мне нужно реализовать checkbox'ы примерно так же как и radio, что бы я значение вписывал в html в не массив
Помогите пожалуйста кодом. Заранее спасибо
Ответы (1 шт):
Автор решения: Николай Парахневич
→ Ссылка
Возьмите и выведите как:
<input id="Jhon" type="checkbox" v-bind:value="{
name: 'Jhon',
age: 11,
price: 1000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Jhon">Jhon</label><br>
<input id="Richard" type="checkbox" v-bind:value="{
name: 'Richard',
age: 12,
price: 2000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Richard">Richard</label><br>
<input id="Robert" type="checkbox" v-bind:value="{
name: 'Robert',
age: 13,
price: 3000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Robert">Robert</label><br>
<input id="Jack" type="checkbox" v-bind:value="{
name: 'Jack',
age: 14,
price: 4000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Jack">Jack</label><br>
id="Jhon" - для привязки label к checkbox;
type="checkbox" - тип поля ввода HTML;
v-bind:value="{ name: 'Jhon', age: 11, price: 1000 }" - присваиваете значению поля ввода объект с данными;
v-model="selectedLogins" - обеспечиваете двунаправленное связывание данных с элементом формы checkbox
v-on:change="sumTotalAge" - вешаете обработчик на событие
Рабочий пример:
var app = new Vue({
el: '.app',
data: {
user: {},
totalAges: 0,
selectedLogins: [],
},
methods: {
clearRadio() {
this.user = {},
this.sumTotalAge();
},
sumTotalAge() {
this.totalAges = this.selectedLogins.reduce((acc, item) => acc += item.age, 0) + (this.user.age ? this.user.age : 0);
}
},
});<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.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 id="Tom" type="radio" v-bind:value="{name:'Tom', age:22}" v-model="user" v-on:change="sumTotalAge">
<label for="Tom">Tom</label>
<br>
<input id="Bob" type="radio" v-bind:value="{name:'Bob', age:25}" v-model="user" v-on:change="sumTotalAge">
<label for="Bob">Bob</label>
<br>
<input id="Sam" type="radio" v-bind:value="{name:'Sam', age:28}" v-model="user" v-on:change="sumTotalAge">
<label for="Sam">Sam</label>
<br>
<div class="font-weight-bold pt-2">Продукты</div>
<input id="Jhon" type="checkbox" v-bind:value="{
name: 'Jhon',
age: 11,
price: 1000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Jhon">Jhon</label><br>
<input id="Richard" type="checkbox" v-bind:value="{
name: 'Richard',
age: 12,
price: 2000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Richard">Richard</label><br>
<input id="Robert" type="checkbox" v-bind:value="{
name: 'Robert',
age: 13,
price: 3000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Robert">Robert</label><br>
<input id="Jack" type="checkbox" v-bind:value="{
name: 'Jack',
age: 14,
price: 4000
}" v-model="selectedLogins" v-on:change="sumTotalAge">
<label for="Jack">Jack</label><br>
</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 py-0 btn-danger" @click="clearRadio">x</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" v-on:change="sumTotalAge">
</li>
</ul>
<hr>
<span class="pl-3">Total age: {{ totalAges }}</span>
</div>
</div>
</div>