如何使用 VueJs 从这个多数组对象中获取值

Question

您好，我有一个多维数组，它有一个值，但我不知道如何获取它，我的数组是这样的：

  0: [{total_collection: 537600, date: "2022-03-01"}, {total_collection: 260700, date: "2022-03-02"},…]
  1: [{total_collection: 349300, date: "2022-03-01"}, {total_collection: 321300, date: "2022-03-02"},…]

如果我将该数据存储到一个名为 this.total_values 的变量中，那么我会这样做

 {{ total_values[0][1] }}

它显示：

 {total_collection: 537600, date: "2022-03-01"}

如果你看到我可以做到这一点：

 {{  total_values[0][1].total_collection }}

它应该 return 537600 但它不起作用 returns:

Error in render: "TypeError: Cannot read properties of undefined (reading 'total_collection')"

为什么？我该如何解决？谢谢！

Answer 1

发布的代码有效：see this playground。你的问题在别处。

<script setup>
import { ref } from 'vue'
const array = ref([
  [{total_collection: 537600, date: "2022-03-01"}, {total_collection: 260700, date: "2022-03-02"}],
  [{total_collection: 349300, date: "2022-03-01"}, {total_collection: 321300, date: "2022-03-02"}]
])
</script>
<template>
  {{array[0][1].total_collection}}
</template>

Answer 2

您是从 API 获取数据还是使用 props 向该组件发送数据？如果你使用这些东西你会得到 undefined 这是因为当你想要获取值时数组没有值。您必须等待数据分配给数组。您可以使用它来解决问题。使用此代码进行测试：

<template v-if="total_values && total_values.length > 0">
    {{  total_values[0][1].total_collection }} 
</template>

如何使用 VueJs 从这个多数组对象中获取值

How can I get the value from this multiple array object with VueJs

vue.js