@PinocioCORP

Калькулятор покрытия площади плиткой и бардюрами на Vue.js?

День добрый.
Постигаю Vue.js и схлопотал небольшой когнитивный диссонанс.
Простенький калькулятор расчета стоимости по цене и количеству никаких проблем.
А вот дальше...

Хочу сделать калькулятор из кучи инпутов, в котором.
1. Есть список на выбор из допустим строительной плитки с параметрами Value и Data-value.
Используя jquery я бы просто получил data-value $('select').attr('data-value') и не парился бы.
<select>
  <option disabled value="">Выберите один из вариантов</option>
  <option value="10" data-value="15">А-10</option>
  <option value="20" data-value="25">А-20</option>
  <option value="30" data-value="35">А-30</option>
  <option value="40" data-value="45">А-40</option>
</select>

2. Есть поля ввода площади для покрытия
Слепо тыкаясь документацией изобразил вот такую вот квокзябру.
<input
	type="number"
	placeholder="Ширина"
	name="width"
	v-model="width"
	v-on:input="area = width * lenght">
<input
	type="number"
	placeholder="Длина"
	name="lenght"
	v-model="lenght"
	v-on:input="area = width * lenght">
<br>
<input
	type="number"
	placeholder="Площадь"
	name="area"
	v-model="area"
	v-on:input="cost = area / count">


3. Чтобы это все можно было рассмотреть.
<span>{{ text1 }}{{ area }}</span><br>
<span>{{ text2 }}{{ cost }}</span>


4. И собственно кнопка:
<button v-on:click="">Расчитать</button>
На кой черт она мне нужна, пока не решил - наверное по привычке.

А собственно вот основная жертва моих изысканий.
var app = new Vue({
		el: '#app_calc',
		data: {
			item: '',
			text1: 'Площадь: ',
			text2: 'Колличество: ',
			width: 10,
			lenght: 10,
			area: 0,
			count: 0,
			cost: 0
		},
		methods:{
			deem: function (){
			}
		}
	})


В чем суть вопроса:
1. Подтолкните в сторону понимания того как лучше реализовать этот самый список с value и data-value для дальнейшей обработки их.
2. Как собственно вращать переменными? Методы? Хорошо, как получить доступ к ним в методе? Вообщем ничего не понимаю.

P.S.: "вумные" тролли идут на хутор.
  • Вопрос задан
  • 487 просмотров
Решения вопроса 1
shmatuan
@shmatuan
Vue, Node, RoR
1. Можно даже динамисески создавать все списки)
https://ru.vuejs.org/v2/guide/forms.html#%D0%92%D1...

2. Смотреть что что-то изменилось и пересчитывать всё
https://ru.vuejs.org/v2/api/#watch
p.s. Но лучше записать в computed, тогда будет само всё отслеживать

Как пример:
https://codepen.io/andreysh/pen/ZwXPOj
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@PinocioCORP Автор вопроса
Да я тут смотрю похожие вопросы, и понял, что немного не в ту сторону вообще пошел.
Но пока я все равно заблудился =_=
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы