[Vuejs]-Why am I able to display an entire JSON object, but not get a value from inside it?

by

1👍

✅

You have an object inside array inside array e.g.: [[{}]] so you have to get the data like this: {{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>
👤Alex Brohshtut

Leave a comment