Задать вопрос
twentytvvo
@twentytvvo
vue

Vue.js Калькулятор цен. Как справиться с radio кнопками?

Есть такого рода код. Проблема в том, что когда я нажимаю на разные radio кнопки, там иконки вместо текста, то value со всех нажатых кнопок плюсуется, а нужно, чтобы учитывалось value только определенной нажатой кнопки.

HTML
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  
<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<script src="jquery-3.4.1.min.js"></script>
 <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://use.typekit.net/nxw4uqt.js"></script>

<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<link rel="stylesheet" href="./style.css">

</head>
<body>

<div id="calculator">

	<form action="">

<h1>Просчитайте стоимость изделия</h1>
<p style="text-align:center;">Вы можете просчитать ореинтировачную стоимость,<br>
Для изготовления индивидуальных размеров нужна связаться по телефону. </p>
<div class="middle">
  <label>
  <input type="radio" id="stol" about="stol" type="stol" name="radio" v-model="stol" value="111" />
  <div class="front-end box">
    <span>Стол</span>
  </div>
</label>
<label>
  <input type="radio" id="polki"  about="polki" type="polki" name="radio" v-model.lazy="polki" value="111"/>
  <div class="polki box">
    <span>Полки</span>
  </div>
</label>
  <label>
  <input type="radio" id="moika" about="moika" type="moika" name="radio" v-model.lazy="moika"value="111"/>
  <div class="back-end box">
    <span>Мойка</span>
  </div>
</label>

<label>
  <input type="radio" id="stelaj" about="stelaj" type="stelaj" name="radio" v-model="stelaj" value="111"/>
  <div class="cargo box">
    <span>Стелаж</span>
  </div>
</label>
</div>


		<label for="mark" class="calclabel">Марка стали</label>

	<select name="mark" v-model="mark" class="calcmark">
	
	<option value="1" selected>AISI 304</option>

		<option value="2">AISI 240</option>

	</select>

	<label for="tradein" style="padding-left: 20px;" class="calclabel"> Количество Полок </label>

	<input type="number" name="tradein" placeholder="1" min="1" max="5" class="currency calcpolki" class="calcpolki" v-model.number="tradeIn"/>
<br />

<label for="width" class="calclabel"> Ширина </label>

	<input type="number" name="width" min="500" max="700" placeholder="500мм до 700мм" class="currency calcwidth" v-model.number="width"/>
<br />

        <label for="height" class="calclabel"> Длина </label>

	<input type="number" name="height" min="500" max="2400" placeholder="500мм до 2400мм" class="currency calcheight" v-model.number="height"/>
<br />


	</form>
		<div class="payment">{{ calcPayment }} грн</div>

</div>

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'>
</script><script  src="./script.js"></script>

</body>
</html>

JS
var calculator = new Vue({
	el: '#calculator',
	data: {
		width: '',
		height: '',
		tradeIn: '',
		polki: '',
		stol: '',
		moika: '',
		stelaj: '',
		mark: '',
		rate: '',
		calcPayment: ''
	},
	computed: {
		calcPayment: function(e){
			var w = this.width;
                        var h = this.height;
			var p = this.polki;
                        var t = this.tradeIn;
			var r = this.rate;
                        var st = this.stol;
                        var mo = this.moika;
                        var sl = this.stelaj;
			var m = this.mark;
			var payment = (( w * 1 ) + ( h * 1 ) + ( t * 1 ) + ( p * 1 ) + ( st - 0 ) + ( mo - 0 ) + ( sl - 0 ) + ( m - 0 )) * 23 || 0;
			return currencyFormat(payment);
		},
		numFormat: function(e){
			e.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
		}
	}
	
});


//https://blog.tompawlak.org/number-currency-formatting-javascript
function currencyFormat (num) {
    return "" + num.toFixed(0).replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

CSS
* {
  box-sizing: border-box;
}

html {
  font-family: 'Ubuntu', sans-serif!important;
  -webkit-font-smoothing: antialiased;
}

body {
  
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 16px;
  transition: all 0.3s ease-in;
}
@media (max-width: 512px) {
  body {
    padding: 32px;
    transition: all 0.3s ease-in;
  }
}
@media (max-width: 360px) {
  body {
    padding: 16px;
    transition: all 0.3s ease-in;
  }
}

h1 {
  text-align: center;
  color: #000;
  margin: 0 0 16px 0;
}

p {
  text-align: center;
  margin-top: 0;
  margin-bottom: 24px;
}

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

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

input, select {
  display: inline-block;
  background-color: #fff;
  color: #888;
  border: 2px solid #888;
  border-radius: 2px;
  height: 56px;
  width: 100%;
  font-size: 24px;
  padding: 0 16px;
  margin-bottom: 24px;
}
input:focus, select: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: #fff;
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    transition: all 0.3s ease-in;
    background: #0f55ab;
    margin: 0px -21px -25px -21px;
    padding: 20px 0px;

}
@media (max-width: 512px) {
  .payment {
    font-size: 40px;
    transition: all 0.3s ease-in;
  }
}
@media (max-width: 400px) {
  .payment {
    font-size: 32px;
    transition: all 0.3s ease-in;
  }
}

@media (max-height: 750px) {
  body {
    height: 100%;
  }
}input[type="radio"]{
   display:none;
}

@import url("https://fonts.googleapis.com/css?family=Dax:400,900");
html {

}

.middle {
  width: 100%;
  text-align: center;
  /* Made by */
}
.middle h1 {
  font-family: 'Ubuntu', sans-serif;
  color: #fff;
}
.middle input[type="radio"] {
  display: none;
}
.calcmark {width:150px; font-family: "Ubuntu";
font-size:15px} .calcpolki {width:70px;font-family: "Ubuntu"!important;
    font-size: 15px;
    text-align: center;}
.middle input[type="radio"]:checked + .box {

      
    border-radius: 3px;
    height: 200px;

}
.calcwidth{font-family: "Ubuntu"!important;
    font-size: 15px;
    text-align: left;}
.calcheight{font-family: "Ubuntu"!important;
    font-size: 15px;
    text-align: left;}
.calclabel {font-size: 15px;width: 130px;}
}
input::placeholder {

}
.middle input[type="radio"]:checked + .box span {
  color: black;
  transform: translateY(70px);
}
.middle input[type="radio"]:checked + .box span:before {
  transform: translateY(0px);
  opacity: 1;
}
.middle .box {
  width: 115px;
  height: 200px;
  background-color: #fff;
  transition: all 250ms ease;
  will-change: transition;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
font-family: 'Ubuntu', sans-serif;
  font-weight: 900;
}
.middle .box:active {
  transform: translateY(10px);
}
.middle .box span {
  position: absolute;
  transform: translate(0, 60px);
  left: 0;
  right: 0;
  transition: all 300ms ease;
  font-size: 15px;
  user-select: none;
  
}
.middle .box span:before {
  font-size: 1.2em;
  font-family: FontAwesome;
  display: block;
  transform: translateY(-10px);
  opacity: 0.3;
  transition: all 300ms ease-in-out;
  font-weight: normal;
  color: white;
}
.middle .front-end span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/table.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle .polki span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/polki.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle .back-end span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/sink.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle .cargo span:before {
    content: '\f121';
    background-image: url(http://dressprice.net/calculator/cargo.svg);
    background-size: 70px;
    width: 70px;
    height: 70px;
    background-repeat: no-repeat;
    margin: 0 auto;
    color: rgba(0, 0, 0, 0);
}
.middle p {
  color: #fff;
font-family: 'Ubuntu', sans-serif;
  font-weight: 400;
}
.middle p a {
  text-decoration: underline;
  font-weight: bold;
  color: #FFF;
}
.middle p span:after {
  content: '\f0e7';
  font-family: FontAwesome;
  color: yellow;
}
#calculator{box-shadow: -1px 2px 18px 1px #cccccc;
    padding: 21px;}
#calculator h1{font-size: 24px;}
input, select {
    display: inline-block;
    background-color: #fff;
    color: #888;
    border: 1px solid #888;
    border-radius: 2px;
    height: 56px;
    width: 100%;
    font-size: 24px;
    padding: 0 16px;
    margin-bottom: 24px;
}
label {
    display: inline-block;
    width: 20%;
    min-width: 128px;
    margin-bottom: 8px;
    font-weight: bold;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: display;
  margin: 0;
}
  • Вопрос задан
  • 1410 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Skypro
    React-разработчик с нуля
    9 месяцев
    Далее
  • Skypro
    JavaScript-разработчик с нуля
    9 месяцев
    Далее
  • Skypro
    Frontend-разработчик с нуля
    9 месяцев
    Далее
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Указывать в v-model радиокнопок следует не разные свойства, а одно и то же - в качестве значения оно будет принимать value выбранной кнопки.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack разработчик (Laravel + Vue.js/React.js)
Nomadic Soft
от 1 600 до 2 240 $
JS Fullstack Инженер (Node.js + Vue.js)
SteadyControl • Воронеж
от 100 000 до 250 000 ₽
Project Manager / Team Lead (внутренний IT-проект, Laravel + Vue)
РПК Discovery • Екатеринбург
от 120 000 ₽
Ещё вакансии