Виктор Майоров

Смотрите документацию

Playground Vuetify

<template>
  <v-app>
    <v-container>
      <v-stepper v-model="step" :items="items">
        <!--...-->
        <template v-slot:item.3>
          <!-- Последний item-->
          <!--...-->
        </template>

        <template v-slot:next>
          <v-btn @click="nextOrSubmit" :disabled="false">
            {{ isLastItem ? 'Submit' : 'Next' }}
          </v-btn>
        </template>
      </v-stepper>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue'

  const items = reactive(['Название и авторы', 'Описания', 'Изображение'])
  const step = ref(1)

  const isLastItem = computed(() => step.value === items.length)

  const nextOrSubmit = () => {
    if (isLastItem.value) {
      // submit
      alert('submit')
      return
    }
    step.value++
  }
</script>

<script setup>
import { some } from "fx.js"
return { some }
</script>

или

<script>
import { some } from "fx.js"
export default {
  methods: {
    some,
  }
}
</script>

Необходимо настроить сборщик для возможности подгружать css файлы через import.

Почитать можно тут и тут

addProductToCart(context, {
    productId,
    colorId,
    sizeId,
    amount,
  }) {
  // Тут наверное не лишним будет доп. проверку повесить, раз setTimeout используете, иначе при повторных запросах у вас могут прошлые setTimeout переводить `updateisAddLoadingEnded` в false
++ if (context.state.updateisAddLoadingEnded) return;
    context.commit('updateAddLoading', true);
    context.commit('updateAddLoadingFailed', false);
    context.commit('updateisAddLoadingEnded', false);
    return axios.post('url', {
      productId: productId,
      colorId: colorId,
      sizeId: sizeId,
      quantity: amount,
    }, {
      params: {
        userAccessKey: context.state.userAccessKey,
      },
    })
      .then((response) => {
        context.commit('updateProductsCartData', response.data.items);
        context.commit('syncProductsCart');
      })
      .catch(() => {
--      context.commit('updateAddLoading', false);
        context.commit('updateAddLoadingFailed', true);
      })
      .finally(() => {
        context.commit('updateAddLoading', false);
        context.commit('updateisAddLoadingEnded', true);
++    setTimeout(() => context.commit('updateisAddLoadingEnded', false),  3000);
      });
  },

Посоветовал бы сделать общий сервис с запросами, например написал бы класс с основными методами(get,post,patch,delete etc) и наследовался бы от него для отправки запросов где нужна авторизация, например получения инфы о пользователе. В родительском классе можно вытаскивать перед запросами из localstorage jwt токен и проверять его время жизни, если оно вышло, то отправляем запрос на обновление токена, обновляем токен и разрешаем запрос для получения инфы о пользователе, иначе меняешь статус isLogin: false и у тебя интерфейс автоматом перерисовывается. Как-то так, надеюсь мое краткое объяснение поможет :)

Вы не можете использовать зарезервированные имена для передачи данных в props.

<autocomplete-input
              :variants="cargo_codes"
              :variantKey="'id'"
              :label="'Код груза'"
              :variantTitle="'code6'"
              v-model="all_information.cargo_code"
--              :class="{ 'error_label': this.telegram_error.cargo_code }"
++             :myClass="{ 'error_label': this.telegram_error.cargo_code }"
            ></autocomplete-input>

export default {
    name: 'AutocompleteInput',
    props: {
        variants: {
            type: Array,
            required: true,
        },
        value: {
            default: ''
        },
        label: {
            type: String,
            default: '',
        },
        variantKey: {
            type: String,
            default: 'id'
        },
        variantTitle: {
            type: String,
            default: 'id'
        },
        placeholder: {
            type: String,
            default: ''
        },
        needFull: {
            type: Boolean,
            default: false
        },
--        error_label: {
--           type: String,
--           default: ''
--       }
++        myClass: {
++          type: String,
++         default: {},
++       }
    },

<template>
    <div class="autocomplite_component">
        <div class="controller">

        <input type="text" class="textarea" @input="onInput" :value="value" :placeholder="placeholder">
        </div>
        <br>
--        <label class="label" :class="error_label">{{ label }}</label>
++        <label class="label" :class="myClass">{{ label }}</label>
        <div class="variants" v-if="filtered && showVariants" style="max-height: 50px; overflow: auto;">
            <div v-for="v in filtered" :key="v[variantKey]" class="variant" @click="selectVariant(v)">
              <span style="cursor: pointer;">{{ v[variantTitle] }}</span>  
            </div>
        </div>
       
    </div>
</template>

filteredArray() {
            return this.array
                .filter((el) => {
                    return (!this.search.length ? true : (el?.name?.toLowerCase().includes(this.search) ||
                        el?.surname?.toLowerCase().includes(this.search))) &&
                        (this.salary === null ? true : el.salary === this.salary) &&
                        (this.quality === null ? true : el.quality === this.quality) &&
                        (this.rating === null ? true : el.rating === this.rating && el.mode !== MODES.HIGH) &&
                        (this.body === null ? true : (this.body === Bodys.CHECKED ?  el.workers.some(({ checked }, index) =>
                              index <= el.workersIds.length - 1 ? !checked : false
                          )
                        : el.workers.every(({ checked }, index) =>
                              index <= el.workersIds.length - 1 ? checked : true
                          )) )
                }).sort((a, b) => {
                    if (a?.name?.toLowerCase() > b?.name?.toLowerCase()) {
                        return isDesc ? -1 : 1;
                    }
                    if (a?.name?.toLowerCase() < b?.name?.toLowerCase()) {
                        return isDesc ? 1 : -1;
                    }
                    return 0;
                });
        },