为什么我能够显示整个JSON对象，但不能从其中获取值？

我有一个Vue单文件组件，它可以显示产品的详细信息（不管怎么说，它是有意的）。我的所有数据似乎都可以从Vuex存储加载。这是我的

产品.vue

页面：

<template>
   <div class="page-content">
      {{Product}}               <!-- this works and shows JSON on the page -->
      {{Product.ProductTitle}}  <!-- this shows nothing at all -->
   </div>
</template>
<script>
    import {mapGetters} from 'vuex';
    export default {
        name: "Product",
        computed:
            {
                ...mapGetters({
                    Product: 'getProduct',
                })
            },
        serverPrefetch() {
            return this.getProduct();
        },
        mounted() {
            if (!this.Product.length) {
                this.getProduct();
            }
        },
        methods: {
            getProduct() {
                return this.$store.dispatch('loadProduct', {ProductID: this.$route.params.ProductID})
            }
        }
    }
</script>

我无法理解为什么

{{Product}}

显示整个JSON对象，而

{{Product.ProductTitle}

什么也没有显示

---

更新：

您在数组中的数组中有一个对象，例如：[[{}]]，因此您必须像这样获取数据：

{{Product[0][0].ProductTitle}

newvue({
el:“应用程序”，
数据：{
产品：[
[{
“ProductID”：14896，
“ProductStatusID”：3，
“CountryID”：207，
“产品名称”：“PS4 Pro控制台+使命召唤：现代战争/死亡搁浅+地铁出逃”，
“ProductItemDescription”：“最好的PS4 Pro捆绑产品！
”
}]
]
}
})

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#应用程序{
背景：#fff；
边界半径：4px；
填充：20px；
过渡：均为0.2s；
}
李{
利润率：8px0；
}
h1{
颜色：黑色
}
氢{
颜色：蓝色；
边缘底部：15px；
}
德尔{
颜色：rgba（0,0,0,0.3）；
}

{{Product[0][0].ProductTitle}
{{Product}}

否，我收到一个错误，然后说

“TypeError:无法读取未定义的属性'ProductTitle'”

这可能是因为Vue试图在加载产品数组之前呈现它。首先检查产品[0]是否存在，例如

{Product[0]&&Product[0].ProductTitle}

如果存在

{Product[0]}

它工作正常并显示JSON。如果我执行

{{Product[0].ProductTitle}

操作，则会出现一个错误

“TypeError:无法读取未定义的属性'ProductTitle'”

这很奇怪，您能在这里发布更多的代码吗？Create snippet可以是jshiddle done在您的fiddle示例中显示问题，

product

变量是一个列表列表。如果您执行

{{Product[0][0].ProductTitle}

操作，它会起作用。@drec4s列表是什么意思？这似乎是它从数据库中出来的方式，在变量声明之后有两个括号。

[ { "ProductID": 12552, "ProductTypeID": 1, "ProductStatusID": 3, "ProductTitle": "Sony PlayStation 4 Pro" }]