Существует калькулятор. В нём 5 шагов, каждый шаг - отдельный однофайловый компонент. Все они динамические, в зависимости от свойства в data
- рендерится соответствующий компонент.
В каждом из компоненте, пользователю нужно выбрать тот или иной пункт или ввести какие-то данные в input
. Вот так выглядит разметка:
<template>
<main class="calc" v-if="schema">
<div class="calc-heading">
<h1 class="heading">Калькулятор стоимости Шаг <span>{{step}}</span></h1>
</div>
<form class="calc-form" @submit.prevent>
<transition name="fade" mode="out-in">
<component :is="currentStep" ref="step" :schema="schema" v-model="form"></component>
</transition>
</form>
<div class="calc-buttons">
<button type="button"
class="button button-red"
:disabled="step <= 1"
@click="prevStep">{{ schema.lang.btns.back }}</button>
<button type="button"
class="button button-red button-red--filled"
:disabled="!nextStepAvailable"
@click="nextStep">{{ step === 5 ? schema.lang.btns.submit : schema.lang.btns.next }}</button>
</div>
</main>
</template>
<script>
import {
mapState
} from 'vuex';
import Target from '@/components/steps/target';
import Material from '@/components/steps/material';
import Fields from '@/components/steps/fields';
import Delivery from '@/components/steps/delivery';
import Contacts from '@/components/steps/contacts';
export default {
components: {
Target,
Material,
Fields,
Delivery,
Contacts
},
data: () => ({
step: 1,
stepNames: ['target', 'material', 'fields', 'delivery', 'contacts'],
stepCompleted: {
target: v => !!v,
material: v => !!v,
fields(v) { // вот в этом проблема
return this.form.target && (v.length === this.form.target.fields.length);
},
delivery: {},
contacts: {},
},
form: {
target: '',
material: '',
fields: '',
delivery: '',
contacts: '',
}
}),
methods: {
nextStep() {
this.step < 5 ? this.step++ : false;
},
prevStep() {
this.step > 1 ? this.step-- : false;
},
async dispatchSchema() {
await this.$store.dispatch('fetchSchema')
}
},
computed: {
nextStepAvailable() {
return this.stepCompleted[this.currentStep](this.form[this.currentStep]);
},
...mapState({
schema: state => state.schema
}),
currentStep() {
return this.stepNames[this.step - 1];
},
},
created() {
this.dispatchSchema()
}
}
</script>
А вот так компоненты:
<template> <!-- Просто с Input -->
<section class="step third">
<h2 class="heading">{{ schema.lang.step_titles.fields }}</h2>
<div class="step-group group">
<label class="group-label" v-for="(field, idx) in value.target.fields" :key="idx">
<input type="number" class="input group-input" v-model="value.fields[idx]" :placeholder="field.name">
<div class="tooltip">?
<span class="tooltiptext">{{ field.desc }}</span>
</div>
</label>
</div>
</section>
</template>
<script>
export default {
props: ['schema', 'value'],
}
</script>
<template> <!-- с Input и и пунктами для выбора -->
<section class="step fourth">
<h2 class="heading">{{ schema.lang.step_titles.delivery }}</h2>
<div class="step-grid grid">
<label class="grid-fr fr" :class="{'fr--selected': variant === value.delivery.method}" v-for="(variant, idx) in schema.lang.delivery.variants" :key="idx">
<img src="https://via.placeholder.com/75/000000" alt="50" class="fr-img">
<input type="radio" name="variant" :value="variant" v-model="value.delivery.method" class="fr-input">
<span class="fr-title">{{ variant.name }}</span>
</label>
</div>
<div class="step-group group">
<label class="group-label" v-for="field in schema.lang.delivery.fields" :key="field.name">
<input type="text" :name="field.name" class="input group-input"
:placeholder="field.title"
v-model="value.delivery[field.name]"
>
</label>
</div>
</section>
</template>
<script>
export default {
props: ['schema', 'value'],
}
</script>
Проблема:
При клике на кнопку - не рендерит компонент fields
и выдает
TypeError: Cannot read property 'target' of undefined
, при повторном клике:
Error in render: "TypeError: this.stepCompleted[this.currentStep] is not a function"
В конечном итоге, нужно проверить, ввёл ли пользователь данные и выбрал ли пункты.
Сейчас первые два шага работают как нужно, приводят к Boolean выбрал ли пользователь пункты исходя из v-model="form"
.
Как проверить тоже самое но с пунктами и текстовыми полями, их может быть сколько угодно, так как данные берутся из схемы.