Не срабатывает checkbox
, на котором висит v-model
:
var app = new Vue({
el : "#app",
data : {
products : [
{
name : "Product #1",
desc : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti tempore ex ab aliquid ipsum voluptatem, veniam dicta, sit fugiat cum ipsa esse laborum sapiente temporibus sunt expedita inventore eligendi?",
price : 89.00,
check : true,
list : [
{
from : 1,
to : 200,
amount : 0.00
},
{
from : 201,
to : 1000,
amount : 0.18
},
{
from : 1001,
to : 2500,
amount : 0.14
},
{
from : 2501,
to : 5000,
amount : 0.13
},
{
from : 5001,
to : 7500,
amount : 0.11
},
{
from : 7501,
to : 10000,
amount : 0.10
},
{
from : 10001,
to : 20000,
amount : 0.09
},
{
from : 20001,
to : 1000000,
amount : 0.08
},
]
},
{
name : "Product #2",
desc : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti tempore ex ab aliquid ipsum voluptatem, veniam dicta, sit fugiat cum ipsa esse laborum sapiente temporibus sunt expedita inventore eligendi?",
price : 80.00,
check : false,
list : [
{
from : 1,
to : 200,
amount : 0.00
},
{
from : 201,
to : 1000,
amount : 0.00
},
{
from : 1001,
to : 2500,
amount : 0.00
},
{
from : 2501,
to : 7500,
amount : 0.00
},
{
from : 7501,
to : 1000000,
amount : 0.00
}
]
},
{
name : "Product #3",
desc : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti tempore ex ab aliquid ipsum voluptatem, veniam dicta, sit fugiat cum ipsa esse laborum sapiente temporibus sunt expedita inventore eligendi?",
price : 80.00,
check : false,
list : [
{
from : 1,
to : 200,
amount : 0.00
},
{
from : 201,
to : 1000,
amount : 0.00
},
{
from : 1001,
to : 2500,
amount : 0.00
},
{
from : 2501,
to : 7500,
amount : 0.00
},
{
from : 7501,
to : 1000000,
amount : 0.00
}
]
},
{
name : "Product #4",
desc : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti tempore ex ab aliquid ipsum voluptatem, veniam dicta, sit fugiat cum ipsa esse laborum sapiente temporibus sunt expedita inventore eligendi?",
price : 0.00,
check : false,
list : [
{
from : 0,
to : 1000000,
amount : 0.00
}
]
},
{
name : "Product #5",
desc : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti tempore ex ab aliquid ipsum voluptatem, veniam dicta, sit fugiat cum ipsa esse laborum sapiente temporibus sunt expedita inventore eligendi?",
price : 0.00,
check : false,
list : [
{
from : 0,
to : 1000000,
amount : 0.00
}
]
},
{
name : "Product #6",
desc : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia corrupti tempore ex ab aliquid ipsum voluptatem, veniam dicta, sit fugiat cum ipsa esse laborum sapiente temporibus sunt expedita inventore eligendi?",
price : 0.00,
check : false,
list : [
{
from : 0,
to : 1000000,
amount : 0.00
}
]
}
],
range : 100,
total : 0
},
methods : {
calculate : function(){
this.total = 0;
for(var i in this.products)
{
if (this.products[i].check)
{
this.total += this.count(this.products[i].price, this.products[i].list);
}
}
},
count : function(price, list)
{
for(var i in list)
{
if (list[i].from >= this.range && this.range <= list[i].to)
{
return price * (list[i].amount + 1);
}
}
}
},
mounted : function(){
this.calculate();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br>
<br>
<br>
<div id="app">
<div class="container">
<div class="row">
<div class="col-xs-12">
{{ range }}
</div>
</div>
<div class="row">
<div class="col-xs-2">
<span>
<b>Invitations/manth:</b>
</span>
</div>
<div class="col-xs-10">
<input type="range" v-model="range" @input="calculate()" @change="calculate()" min="100" max="10000" step="100" />
</div>
</div>
<div class="row">
<div class="col-xs-12" v-for="(p, index) in products">
<div class="media">
<div class="media-left">
<div class="checkbox">
<label :for="'product-' + index">
<input :id="'product-' + index" @change="calculate()" v-model="products[index].check" type="checkbox" :disabled=" ! index" />
{{ p.name }}
</label>
</div>
</div>
<div class="media-body">
</div>
<div class="media-right">
<b>
{{ p.price }} $ / manth
</b>
</div>
</div>
<div class="form-group">
{{ p.desc }}
</div>
</div>
<div class="col-xs-12 text-right">
<span>
<b>
Total: {{ total }} $ / manth
</b>
</span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</body>
</html>
http://jsbin.com/cuqajeseju/edit?js,output
Замените click на change:
<input @change="calculate" v-model="products[index].check" type="checkbox" :disabled=" ! index" />
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
В консоли ничего не отображается(версия браузера последняя, с кодировкой все порядке, файл с расширениемhtml)
Проблема в том, что при сложение двух чисел (создается сначала первое, потом при нажатии плюса, минуса, делить или умножить создается второе,...
Имеется выпадашка, в которой содержаться пункты с названиями городов, а также placeholderСуть идеи такова, что когда пишешь в placeholdere название города,...