无法在脚本中访问数据变量，但可以在html中访问

Question

我已经用数组填充了一个数据变量，并且可以使用html中的v-for来访问其内容，但是我无法访问脚本中变量中的任何数据，而且我也没有知道为什么。

var result = [{
  "CatalogName": "Retro Doors",
  "ItemName": "French Doors",
  "ItemListPrice": "$461.00",
  "ItemType": "Oak",
  "ItemFeatures": [{
      "Features": "Door Quantity",
      "QTY": 2
    },
    {
      "Features": "Door Hinges",
      "QTY": 4
    },
    {
      "Features": "Door Knobs",
      "QTY": 1
    },
    {
      "Features": "Door Looks",
      "QTY": 1
    },
    {
      "Features": "Glass Panes",
      "QTY": 2
    }
  ]
}];
new Vue({
  el: '#app',
  beforeCreate: function() {
    console.log("Before Created");
  },
  created: function() {
    console.log("Created");
    this.GetItemsList();
  },
  beforeMount: function() {
    console.log("Before Mount");
  },
  data: {
    itemPriceList: []
  },
  methods: {
    GetItemsList() {
      this.itemPriceList = result;
    }
  },
  mounted: function() {
    console.log("Mounted");
    console.log(this.ItemPriceList);
  }
});

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  {{ itemPriceList[0].CatalogName }}
  <div v-for="item in itemPriceList">
    {{ item.ItemName }}
    <div v-for="items in item.ItemFeatures">
      {{ items.Features }} : {{ items.QTY }}
    </div>
  </div>
</div>

Answer 1

您在mounted钩中的变量名中有一个错字-与大写I一起使用。

数据中：itemPriceList
在安装的挂钩中：this.ItemPriceList

应该与data属性中定义的相同。