Почему я могу отобразить весь JSON объект, но не могу получить значение из него? - PullRequest
Новая
       3

Почему я могу отобразить весь JSON объект, но не могу получить значение из него?

0 голосов
/ 22 марта 2020

У меня есть 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 показывает проблему

1 Ответ

1 голос
/ 22 марта 2020

У вас есть объект внутри массива внутри массива, например: [[{}]], поэтому вы должны получить такие данные: {{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>
...