主页 / 问题 / 1374084
Accepted
Moonwolf45
Asked:2022-06-22 23:43:13 +0800 CST2022-06-22 23:43:13 +0800 CST

VueJs 计算数据和渲染

  • 772

一般来说，我正在用 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 有这个数组，而且所有的检查都是值得的，但是还是会出现错误。怎么解决？？

javascript

2 个回答

  1. 了解如何在 Vuex 中初始化货币变量。如果为空数组，那么您的检查v-if="currencies !== null将被忽略，但如果您从后端获取数据，那么在加载组件时，货币将具有来自 Vuex 的默认值。那些。如果它是一个空数组，那么您的货币对象中将不存在“值”字段。简单的解决方案：添加一个加载变量（并在从后面加载数据之前将其设置为true，加载后将其设置为false）。

    所以检查将如下所示： <tbody v-if="!loading && currencies !== null && currenciesUser !== null">

    好吧，或者是没有不必要动作的最简单方法： <tbody v-if="currencies && currencies.length > 0 && currenciesUser !== null">

    • 0
  2. Best Answer

    我明白为什么我会出错。

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

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

    底线是，在currencyUser 数组中有货币“卢布”，但在currency 数组中没有，并且当带有标识符“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>

    对了，除此之外，我把所有的计算都放到了一个单独的方法中，现在一切都变得更漂亮更好了。

    • 0

相关问题