如何访问嵌套数据结构中的数据？

Question

我的项目使用 vue 和 firebase。所以最初，我以嵌套数组（数组中的数组）的形式将一些数据发送到后端。然后firebase/firestore开始大喊：

Function DocumentReference.set() called with invalid data. Nested arrays are not supported.

在网上搜索解决方案后，我找到了
所以我在 vue 中初始化了我想发送到后端的数据，如下所示，paths 数组将存储多个数组：

    data() {
     return {  
            product: {
                images: [{paths: []}]
            }
     }
  }

并保存到后台

this.product.images[0].paths.push([this.bigImgPath, this.thumbImgPath] // i.e push an array with 2 strings into the paths-array

它抛出一个错误：

TypeError: Cannot read property 'paths' of undefined

这个 answer 很好地解释了这个问题，但我仍然得到错误，即使我通过 this.product.images[0] 引用了数组的第一个元素，它存储了一个带有 paths 的对象作为键和empty array作为值，然后使用点符号访问该键的值（空数组）并推送我的新数组。如何将包含两个字符串 (bigImgPath, thumbImgPath) 的数组成功添加到我的嵌套数据结构中？谢谢！

编辑：可重现代码

new Vue({
  el: "#app",
  data: {
  product: {
    images: [{paths: []}]
  },
  bigImgPath : "/path/src/big.jpg",
  thumbImgPath : "/path/src/thumb.jpg"
  },
  methods: {
    myFunc: function(todo){
        this.product.images[0].paths.push([this.bigImgPath, this.thumbImgPath])
        console.log(this.product.images[0].paths[0][0])
            console.log(this.product.images[0].paths[0][1])
          document.getElementById("first-text").innerHTML = this.product.images[0].paths[0][0]
          document.getElementById("second-text").innerHTML = this.product.images[0].paths[0][1]
    }
  }
})

.first-text {
font-size: 18px;
font-weight: bold;
}

.second-text {
font-size: 18px;
font-weight: bold;
}
.main-btn {
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<html>
<body>
<div id="app">
  <div id="main">
    <p id="first-text"></p>
    <p id="second-text"></p>
    <button @click="myFunc()" class="main-btn">Press me!</button>
  </div>
</div>
</body>

</html>

Answer 1

您的简单代码可以正常工作，这对您有很大帮助

这告诉你，这不是一个根本不可能的过程，你已经正确理解了JS和Vue中必要的语法。

调试的下一步：找出未定义的原因

错误消息告诉您 this.product.images[0] 是 undefined。因此，我建议在出现错误的行之前插入以下 console.log 语句。

console.log("this.product:", JSON.stringify(this.product,null,2) );
console.log("this.product.images:", JSON.stringify(this.product.images,null,2) );
console.log("this.product.images[0]:", JSON.stringify(this.product.images[0],null,2) );
this.product.images[0].paths.push([this.bigImgPath, this.thumbImgPath]

这可能会揭示问题所在。如果没有，请报告您看到的情况。

注意您正在创建的嵌套数组

虽然您还没有将它写入 Firestore，因此还没有遇到错误消息，但我很担心这个片段。

push([this.bigImgPath, this.thumbImgPath])

它将数组 [big, thumb] 作为父数组中的一个元素。这是一个嵌套数组，可能会在 Firestore 中给您一个错误。

你的意思是这样的吗？

push({paths:[this.bigImgPath, this.thumbImgPath]})

如何访问嵌套数据结构中的数据？

How to access data in nested data-structure?

javascript

data-manipulation

multidimensional-array

vue.js

您的简单代码可以正常工作，这对您有很大帮助

调试的下一步：找出未定义的原因

注意您正在创建的嵌套数组