Как сделать такой калькулятор на vue?

Question

[lookingfor2]

Подскажите, поэтапно куда копать и как делать, пожалуйста

Comments

[Arman]

чем доки не нравятся?

Answer 1

[Владимир Коротенко]

1. в data массив опций с саб опциями
2. в data массив отмеченных опций с саб опциями
3. Список опций ul -> li v-for
4. регион итого Список отмеченных опций ul -> li v-for
5. обработчик на кнопку копирующий из списка опций в список отмеченных опций
6. смена стиля кнопки в списке стиля опций пп 5
7. computed свойство итого. Пробегается по списку отмеченных опций и суммирует результат
8. обработчик отправить заявку. Формирует заявку на основе отмеченных опций, на основе шаблона, кстати лучше добавить поля имя, телефон и почту

Comments

[lookingfor2]

Попытаюсь разобраться, спасибо

[Владимир Коротенко]

До кучи, в качестве элементов используйте компоненты, и передавайте им через пропсы значения,
и внутри восстанавливайте состояние в зависимости от типа ячейки.

options:[
      {id: 4, type:'simple', total: 1000, name: 'simple' },
      {id: 5, type:'select', total: 5000, name: 'select'}
      {id: 6, type:'select', total: 1000 , name: 'select'}
     ]

То есть вы например для ячейки select выбираете пункт переданный в total, а при выборе элемента, обновляете total. Вся логика в компоненте, и верхняя часть вообще не знает что и как там устроено. Все внутри компонента.

<li v-for="opt in options" class="opt">
  <SimpleCell v-if="opt.type === 'simple'" :item="opt"/>
  <SelectCell v-else-if="opt.type === 'select'" :item="opt" />
  <DefaultCell v-else :name="opt.name" :total='opt.total' />

[lookingfor2]

где ошибка ?
точнее как вывести правильно сам option

[Владимир Коротенко]

С вложениями проблема
прямое указание options

подразумевает

data:{
options: [ /**/]
}

И данные лучше организовать немного по другому.

В массивах опций только тип, сумма всего и возможно имя.
А все опции создаются внутри кастомного контрола, который и пишет все внутрь