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

Question

我有 Vue 单文件组件，它显示产品的详细信息（无论如何它都意味着）。我所有的数据似乎都可以从 Vuex 商店加载。这是我的Product.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 变量中的数据就是这样的：

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

我无法理解为什么{{Product}} 会显示整个 JSON 对象，而 {{Product.ProductTitle}} 却什么也没有显示？

更新：JSFiddle showing problem

Answer 1

您在数组内部有一个对象，例如：[[{}]]，因此您必须像这样获取数据：{{Product[0][0].ProductTitle}}

new Vue({
  el: "#app",
  data: {
    Product: [
      [{
        "ProductID": 14896,
        "ProductStatusID": 3,
        "CountryID": 207,
        "ProductTitle": "PS4 Pro Console +  Call of Duty: Modern Warfare / Death Stranding + Metro Exodus",
        "ProductItemDescription": "<p>The best PS4 Pro bundle offer!</p>"
      }]
    ]
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h1 {
  color: black
}

h2 {
  color: blue;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <article role="article" class="">
    <h1>
      {{Product[0][0].ProductTitle}}
      <!-- this doesn't work? -->
    </h1>
    <h2>
      {{Product}}
    </h2>
  </article>
</div>