• Как правильно организовать код большой формы-калькулятора на vue.js?

    @Lavich
    Frontend developer
    Раздели свой компонент Cleaning.vue на Type.vue, Area.vue, Window.vue и т.п., в которых реализуй механику работы каждого элемента формы и его стилизацию; для них реализуешь работу через v-model:

    <template>
                        <div class="fieldItem">
                            <label for="cleaningType">Тип уборки</label>
                            <select id="cleaningType" :value="value" @input="$emit('input', $event.value)">
                              <option disabled value="">Выберите один из вариантов</option>
                              <option value="1" >Быстрая</option>
                              <option value="2" >Генеральная</option>
                              <option value="3">После ремонта</option>
                            </select>
                        </div>
    </template>


    export default {
      props: {
        value: Number
    }
    }


    в App.vue оставь валидацию и отправку на сервер:

    <form class="calculatorForm">
            <Type v-model="type" />
            <Area v-model="area" />
            <Window v-model="windows" />
            ....
            <button @click.prevent="getPriceInfo" >Рассчитать</button>
        </form>
    Ответ написан
    4 комментария