1

Вообщем пишу приложение на VueJS у меня в коде есть такая вещь:

<tbody v-if="currencies !== null && currenciesUser !== null">
  <tr v-for="currencyItem in currenciesUser" :key="currencyItem.id">
    <td>{{ $t(currencyItem.Name) }}</td>
    <td v-if="currencyItem.CharCode !== mainCurrency.CharCode && mainCurrency.CharCode === 'RUB'">
      {{ new Intl.NumberFormat(mainCurrency !== null ? mainCurrency.locale : 'ru-RU', { style: 'currency', currency: mainCurrency !== null ? mainCurrency.CharCode : 'RUB', minimumFractionDigits: 2, maximumFractionDigits: 2}).format(currencies.Valute[currencyItem.CharCode].Value / currencies.Valute[currencyItem.CharCode].Nominal) }}
    </td>
    <td v-else-if="currencyItem.CharCode !== mainCurrency.CharCode && mainCurrency.CharCode !== 'RUB'">
      {{ new Intl.NumberFormat(mainCurrency !== null ? mainCurrency.locale : 'ru-RU', { style: 'currency', currency: mainCurrency !== null ? mainCurrency.CharCode : 'RUB', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format((currencies.Valute[currencyItem.CharCode].Value / currencies.Valute[currencyItem.CharCode].Nominal) * (currencies.Valute[mainCurrency.CharCode].Value / currencies.Valute[mainCurrency.CharCode].Nominal)) }}
    </td>
    <td>{{ $moment(currencies.PreviousDate).format('DD.MM.YYYY HH:mm') }}</td>
  </tr>
</tbody>

В скрипт коде:

computed: {
  currencies () {
    return this.$store.getters.currencies
  },
  currenciesUser () {
    return this.$store.getters.currenciesUser
  },
  mainCurrency () {
    return this.$store.getters.mainCurrency
  }
}

И по сути всё должно работать, но почему-то я ловлю ошибку:

TypeError: Cannot read properties of undefined (reading 'Value')
at eval (CurrencyCard.vue?4fd3:100:1)
at Proxy.renderList (vue.runtime.esm.js?2b0e:2630:1)
at Proxy.render (CurrencyCard.vue?4fd3:40:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548:1)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4479:1)
at Watcher.run (vue.runtime.esm.js?2b0e:4554:1)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310:1)
at Array.eval (vue.runtime.esm.js?2b0e:1980:1)
at flushCallbacks (vue.runtime.esm.js?2b0e:1906:1)

Хотя во vuex этот массив есть, и проверки все стоят, но всё равно идёт ошибка. Как это починить??

2 ответа 2

0

Посмотрите как у вас инициализируется переменная currencies во Vuex. Если как пустой массив, то ваша проверка v-if="currencies !== null будет проигнорирована, но если вы берете данные с бэкенда то на момент загрузки компонента currencies будет иметь дефолтное значение из Vuex. Т.е. если это пустой массив, то поле 'Value' не будет существовать в вашем объекте currencies. Простое решение: добавить переменную loading (и устанавливать ее в true перед тем как загружаете данные с бэка, после загрузки устанавливать false).

Таким образом проверка будет выглядеть так: <tbody v-if="!loading && currencies !== null && currenciesUser !== null">

Ну или самый простой способ без лишних движений: <tbody v-if="currencies && currencies.length > 0 && currenciesUser !== null">

1
  • В том то и проблема, что во vuex она инициализируется как null. И да я беру данные с бекенда. И еще данные у меня загружаются заранее и обычно сразу несколько поэтому с переменной будет проблема к тому же она уже используется и обычно проверяет vuex на пустоту для нескольких полей если они не пусты, то тогда загрузка завершена и идёт уже рендеринг
    – Moonwolf45
    Commented 23 янв. 2022 в 16:24
0

Я понял почему у меня идёт ошибка.

currencies - Это массива валют который я получаю с сайта Центробанка(Если не ошибаюсь)

currenciesUser - Это массив валют которые пользователь выбрал для пользования

Суть в том, что в массиве currenciesUser есть валюта "рубли", а в массиве currencies её нет и когда итерация с идентификатором "RUB" доходит до массива, то понятно, что найти её не может.

Поэтому я переписал примерно так:

<tbody v-if="currencies !== null && currenciesUser !== null">
   <tr v-for="currencyItem in currenciesUser" :key="currencyItem.id">
     <template v-if="currencyItem.CharCode !== 'RUB'">
       <td>{{ $t(currencyItem.Name) }}</td>
       <td>
         {{ new Intl.NumberFormat(mainCurrency !== null ? mainCurrency.locale : 'ru-RU', { style: 'currency', currency: mainCurrency !== null ? mainCurrency.CharCode : 'RUB', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(getCurrencyFormat(currencyItem.CharCode)) }}
       </td>
       <td>{{ $moment(currencies.PreviousDate).format('DD.MM.YYYY HH:mm') }}</td>
     </template>
   </tr>
 </tbody>

Так правильно, к тому же все расчеты выкинул в отдельный метод и теперь все красивее и лучше.

Ваш ответ

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

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