День добрый.
Постигаю 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.: "вумные" тролли идут на хутор.
