Не срабатывает checkbox

322
28 августа 2017, 09:50

Не срабатывает 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

Answer 1

Замените click на change:

<input @change="calculate" v-model="products[index].check" type="checkbox" :disabled=" ! index" />
READ ALSO
Проблемы с console.log

Проблемы с console.log

В консоли ничего не отображается(версия браузера последняя, с кодировкой все порядке, файл с расширениемhtml)

230
Проблема при создании калькулятора

Проблема при создании калькулятора

Проблема в том, что при сложение двух чисел (создается сначала первое, потом при нажатии плюса, минуса, делить или умножить создается второе,...

188
Зачем в meteor js 1.5 вставки import?

Зачем в meteor js 1.5 вставки import?

Во всех файлах по умолчанию указывается вначале:

216
Поиск из пунктов

Поиск из пунктов

Имеется выпадашка, в которой содержаться пункты с названиями городов, а также placeholderСуть идеи такова, что когда пишешь в placeholdere название города,...

220