Не работает калькулятор через кнопки

Question

Не работает калькулятор через кнопки

Рейтинг: 3Ответов: 3Опубликовано: 10.07.2023

При ручном вводе данных всё хорошо. А через подменные кнопки input type="number" +- не считает.

var calculator = new Vue({
    el: '#calculator',
    data: {
        visota: '0.3',
        dlina: '10',
        shirina: '10',
        length: '60',
        rate: '5',
        calcPayment: ''
    },
    computed: {
        calcPloshad: function(e){
            var ploshad = this.dlina * this.shirina;
            return currencyFormat(ploshad);
        },
        calcObiym: function(e){
        //  var ploshad = this.dlina * this.shirina;
            var obiym = this.dlina * this.shirina * this.visota;
            return currencyFormat(obiym);
        }
    }
    
});


function currencyFormat (num) {
    return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

* {
    box-sizing: border-box;
}

html {
    font-family: "proxima-nova", "Helvetica Neue",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #999;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-top: 3px;
    transition: all 0.3s ease-in;
}

.container {
    max-width: 480px;
    margin: 0 auto;
    background-color: #fff;
    padding: 0 64px;
    box-shadow: 2px 2px 96px #111;
    border-radius: 8px;
    transition: all 0.3s ease-in;
}

label {
    display: inline-block;
    width: 25%;
    min-width: 128px;
    font-weight: bold;
}

input, select {
    display: inline-block;
    background-color: #fff;
    color: #888;
    border: 2px solid #888;
    border-radius: 2px;
    width: 100%;
    font-size: 24px;
    
    &:focus {
        background-color: #fff;
        color: #3200ff;
        border-color: #3200ff;
        outline: 0;
    }
    
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.payment {
    color: #000;
    font-size: 20px;
    text-align: left;
    font-weight: bold;
    transition: all 0.3s ease-in;
    
    @media (max-width: 512px){
        font-size: 40px;
        transition: all 0.3s ease-in;
    }
    
    @media (max-width: 400px){
        font-size: 32px;
        transition: all 0.3s ease-in;
    }
    
}

@media (max-height: 750px){
    body {
        height: 100%;
    }
}
.cont {
    position: relative;
}
#calculator form {
    position: relative;
}
#calculator input {
    text-align: center;
}
#calculator .number-minus {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    padding: 0;
    display: block;
    text-align: center;
    border: none;
    border-right: 1px solid #ddd;
    font-size: 30px;
    font-weight: 600;
    background: transparent;
    height: 34px;
}
#calculator .number-plus {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    padding: 0;
    display: block;
    text-align: center;
    border: none;
    border-left: 1px solid #ddd;
    font-size: 30px;
    font-weight: 600;
    background: transparent;
    height: 34px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="calculator">
    <div class="container">
        <form action="">
            <div class="cont">
                <label for="visota">Высота</label>
                <button class="number-minus" type="button">-</button>
                <input type="number" step="0.1" name="visota" class="visota" v-model.number="visota">
                <button class="number-plus" type="button">+</button>
            </div>
            <div class="cont">
                <label for="dlina">Длина</label>
                <button class="number-minus" type="button">-</button>
                <input type="number" step="0.5" name="dlina" class="dlina quantity-num" v-model.number="dlina">
                <button class="number-plus" type="button">+</button>
            </div>
            <div class="cont">
                <label for="shirina">Ширина</label>
                <button class="number-minus" type="button">-</button>
                <input type="number" step="0.5" name="shirina" class="shirina" v-model.number="shirina"/>
                <button class="number-plus" type="button">+</button>
            </div>
        </form>
        <div class="payment">Площадь плиты: {{ calcPloshad }} м<sup>2</sup></div>
        <div class="payment">Объем бетона: {{ calcObiym }} м<sup>3</sup></div>
    </div>
</div>

javascript jquery vue.js

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Проблема в вашем коде в onclick="this.previousElementSibling.stepUp() и onclick="this.previousElementSibling.stepDown(), эти методы изменяют значение элемента за пределами области действия Vue и поэтому директива v-model не обновляет данные как ожидается от нее.

Один из вариантов решения вашей задачи (Используя манипуляцию данными, без прямого использования HTML элементов и их методов):

const inputComponent = Vue.component('input-component', {
  props: ['step', 'value', 'label', 'nameInput'],
  computed: {
    model: {
      get() {
        return parseFloat(this.value);
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  methods: {
    stepDown: function(event) {
      this.model = this.model - this.step;
    },
    stepUp: function(event) {
      this.model = this.model + this.step;
    },
  },
  template: `
  <div class="cont">
    <label :for="nameInput">{{label}}</label>
    <button
      class="number-minus"
      type="button"
      @click="stepDown"
     >-</button>
    <input
      type="number"
      :step="step"
      :nameInput="nameInput"
      class="dlina quantity-num"
      v-model.number="model"
    >
    <button
      class="number-plus"
      type="button"
      @click="stepUp"
    >+</button>
  </div>
`
});

var calculator = new Vue({
  el: '#calculator',
  components: {
    inputComponent,
  },
  data: {
    visota: '0.3',
    dlina: '10',
    shirina: '10',
    length: '60',
    rate: '5',
    calcPayment: '',
  },
  computed: {
    calcPloshad: function(e) {
      var ploshad = this.dlina * this.shirina;
      return currencyFormat(ploshad);
    },
    calcObiym: function(e) {
      //  var ploshad = this.dlina * this.shirina;
      var obiym = this.dlina * this.shirina * this.visota;
      return currencyFormat(obiym);
    }
  }
});


function currencyFormat(num) {
  return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

* {
  box-sizing: border-box;
}

html {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #999;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 3px;
  transition: all 0.3s ease-in;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 64px;
  box-shadow: 2px 2px 96px #111;
  border-radius: 8px;
  transition: all 0.3s ease-in;
}

label {
  display: inline-block;
  width: 25%;
  min-width: 128px;
  font-weight: bold;
}

input,
select {
  display: inline-block;
  background-color: #fff;
  color: #888;
  border: 2px solid #888;
  border-radius: 2px;
  width: 100%;
  font-size: 24px;
  &:focus {
    background-color: #fff;
    color: #3200ff;
    border-color: #3200ff;
    outline: 0;
  }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.payment {
  color: #000;
  font-size: 20px;
  text-align: left;
  font-weight: bold;
  transition: all 0.3s ease-in;
  @media (max-width: 512px) {
    font-size: 40px;
    transition: all 0.3s ease-in;
  }
  @media (max-width: 400px) {
    font-size: 32px;
    transition: all 0.3s ease-in;
  }
}

@media (max-height: 750px) {
  body {
    height: 100%;
  }
}

.cont {
  position: relative;
}

#calculator form {
  position: relative;
}

#calculator input {
  text-align: center;
}

#calculator .number-minus {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  border-right: 1px solid #ddd;
  font-size: 30px;
  font-weight: 600;
  background: transparent;
  height: 34px;
}

#calculator .number-plus {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  border-left: 1px solid #ddd;
  font-size: 30px;
  font-weight: 600;
  background: transparent;
  height: 34px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="calculator">
  <div class="container">
    <form action="">
      <input-component label="Высота" nameInput="visota" v-model="visota" :step="0.1"></input-component>
      <input-component label="Длина" nameInput="dlina" v-model="dlina" :step="0.5"></input-component>
      <input-component label="Ширина" nameInput="shirina" v-model="shirina" :step="0.5"></input-component>
    </form>
    <div class="payment">Площадь плиты: {{ calcPloshad }} м<sup>2</sup></div>
    <div class="payment">Объем бетона: {{ calcObiym }} м<sup>3</sup></div>
  </div>
</div>

И еще один вариант (Используя refs и вышеприведенные методы манипуляции значением поля ввода):

const inputComponent = Vue.component('input-component', {
  props: ['step', 'value', 'label', 'nameInput'],
  computed: {
    model: {
      get() {
        return parseFloat(this.value);
      },
      set(value) {
        this.$emit('input', value);
      }
    }
  },
  methods: {
    stepDown: function(event) {
      this.$refs.input.stepDown();
      this.model = this.$refs.input.value;
    },
    stepUp: function() {
      this.$refs.input.stepUp();
      this.model = this.$refs.input.value;
    },
  },
  template: `
  <div class="cont">
    <label :for="nameInput">{{label}}</label>
    <button
      class="number-minus"
      type="button"
      @click="stepDown"
     >-</button>
    <input
      ref="input"
      type="number"
      :step="step"
      :nameInput="nameInput"
      class="dlina quantity-num"
      v-model.number="model"
    >
    <button
      class="number-plus"
      type="button"
      @click="stepUp"
    >+</button>
  </div>
`
});

var calculator = new Vue({
  el: '#calculator',
  components: {
    inputComponent,
  },
  data: {
    visota: '0.3',
    dlina: '10',
    shirina: '10',
    length: '60',
    rate: '5',
    calcPayment: '',
  },
  computed: {
    calcPloshad: function(e) {
      var ploshad = this.dlina * this.shirina;
      return currencyFormat(ploshad);
    },
    calcObiym: function(e) {
      //  var ploshad = this.dlina * this.shirina;
      var obiym = this.dlina * this.shirina * this.visota;
      return currencyFormat(obiym);
    }
  }
});


function currencyFormat(num) {
  return num.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

* {
  box-sizing: border-box;
}

html {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #999;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 3px;
  transition: all 0.3s ease-in;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 64px;
  box-shadow: 2px 2px 96px #111;
  border-radius: 8px;
  transition: all 0.3s ease-in;
}

label {
  display: inline-block;
  width: 25%;
  min-width: 128px;
  font-weight: bold;
}

input,
select {
  display: inline-block;
  background-color: #fff;
  color: #888;
  border: 2px solid #888;
  border-radius: 2px;
  width: 100%;
  font-size: 24px;
  &:focus {
    background-color: #fff;
    color: #3200ff;
    border-color: #3200ff;
    outline: 0;
  }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.payment {
  color: #000;
  font-size: 20px;
  text-align: left;
  font-weight: bold;
  transition: all 0.3s ease-in;
  @media (max-width: 512px) {
    font-size: 40px;
    transition: all 0.3s ease-in;
  }
  @media (max-width: 400px) {
    font-size: 32px;
    transition: all 0.3s ease-in;
  }
}

@media (max-height: 750px) {
  body {
    height: 100%;
  }
}

.cont {
  position: relative;
}

#calculator form {
  position: relative;
}

#calculator input {
  text-align: center;
}

#calculator .number-minus {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  border-right: 1px solid #ddd;
  font-size: 30px;
  font-weight: 600;
  background: transparent;
  height: 34px;
}

#calculator .number-plus {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  padding: 0;
  display: block;
  text-align: center;
  border: none;
  border-left: 1px solid #ddd;
  font-size: 30px;
  font-weight: 600;
  background: transparent;
  height: 34px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="calculator">
  <div class="container">
    <form action="">
      <input-component label="Высота" nameInput="visota" v-model="visota" :step="0.1"></input-component>
      <input-component label="Длина" nameInput="dlina" v-model="dlina" :step="0.5"></input-component>
      <input-component label="Ширина" nameInput="shirina" v-model="shirina" :step="0.5"></input-component>
    </form>
    <div class="payment">Площадь плиты: {{ calcPloshad }} м<sup>2</sup></div>
    <div class="payment">Объем бетона: {{ calcObiym }} м<sup>3</sup></div>
  </div>
</div>

Answer 2

▲ 1

Несмотря на то что input number, значение он отдает текстом. Используй parseFloat.

И методы html5 не реактивны. Обращайся к модели напрямую.

Answer 3

▲ 1

Числовые данные зачем делать строками? Задавайте их числом, и не понадобится парсинг.

    data: {
        visota: 0.3,
        dlina: 10,
        shirina: 10,
        length: 60,
        rate: 5,
        calcPayment: ''
    },

По клику просто инкрементируйте/декрементируйте соответствующую величину.

        <form action="">
            <div class="cont">
                <label for="visota">Высота</label>
                <button class="number-minus" type="button" v-on:click="visota -= 0.1">-</button>
                <input type="number" step="0.1" name="visota" class="visota" v-model="visota">
                <button class="number-plus" type="button" v-on:click="visota += 0.1">+</button>
            </div>
            <div class="cont">
                <label for="dlina">Длина</label>
                <button class="number-minus" type="button" v-on:click="dlina -= 0.5">-</button>
                <input type="number" step="0.5" name="dlina" class="dlina quantity-num" v-model="dlina">
                <button class="number-plus" type="button" v-on:click="dlina += 0.5">+</button>
            </div>
            <div class="cont">
                <label for="shirina">Ширина</label>
                <button class="number-minus" type="button" v-on:click="shirina -= 0.5">-</button>
                <input type="number" step="0.5" name="shirina" class="shirina" v-model="shirina"/>
                <button class="number-plus" type="button" v-on:click="shirina += 0.5">+</button>
            </div>
        </form>

Не работает калькулятор через кнопки

Ответы