0

Существует калькулятор. В нём 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".

Как проверить тоже самое но с пунктами и текстовыми полями, их может быть сколько угодно, так как данные берутся из схемы.

1 ответ 1

1

Честно говоря, из поста плохо понятно, в чём проблема:

если у вас isDisabledcomputed на основе состояния, и все необходимые элементы состояния "подняты" в компоненту формы (т.е. доступны в ней, а не в дочерних компонентах), то вычисляете себе isDisabled на их основе и получаете кнопку неактивной, когда надо (только, наверное, для nextStep и prevStep нужны разные isDisabled).

Если не подняты, поднимите или прокидывайте через v-model флаг stepCompleted в компоненту шага и используйте его в вычислении isDisabled.

Поскольку в вопросе вы не привели код модели, трудно понять, в чём же затруднение.

2
  • isDisabled пустой сейчас, окей, сейчас попробую через v-model="stepCompleted " сделать
    – ccxdec
    26 янв 2020 в 15:49
  • добавил код, ваш метод не сработал, так как у меня v-model уже есть.
    – ccxdec
    26 янв 2020 в 22:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.