RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1374084
Accepted
Moonwolf45
Moonwolf45
Asked:2022-06-22 23:43:13 +0000 UTC2022-06-22 23:43:13 +0000 UTC 2022-06-22 23:43:13 +0000 UTC

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 2 个回答
  • 10 Views

2 个回答

  • Voted
  1. Vladimir Isakov
    2022-06-23T06:50:14Z2022-06-23T06:50:14Z

    了解如何在 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
    Moonwolf45
    2022-06-24T03:56:26Z2022-06-24T03:56:26Z

    我明白为什么我会出错。

    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

相关问题

  • 第二个 Instagram 按钮的 CSS 属性

  • 由于模糊,内容不可见

  • 弹出队列。消息显示不正确

  • 是否可以在 for 循环中插入提示?

  • 如何将 JSON 请求中的信息输出到数据表 Vuetify vue.js?

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5