控制台访问不到vue对象的属性？

Question

window.onload = function(){     var app = new Vue({         el: "#app",         data: {             foodList: [                 {                     name: "葱",                     price: 2.1,                     discount: 0.9                 },                 {                     name: "姜",                     price: 5.2,                     discount: 0.2                 },                 {                     name: "蒜",                     price: 0.8,                     discount: 0.8                 }             ]         }     }) }<div id="app">     <ul>         <li v-for="food in foodList">{{food.name}}: ￥{{food.price * food.discount}}</li>     </ul> </div>控制台可以访问到app对象，但不能访问到app.foodList，值为undefined。mac平台，safari和chrome都是这样。

Answer 1

foodList是data里的数据，你应该这样使用
app.data.foodList

Answer 2

var app = new Vue({
        el: "#app",
        data () {
            return {
                foodList: [
                    {
                        name: "葱",
                        price: 2.1,
                        discount: 0.9
                    },
                    {
                        name: "姜",
                        price: 5.2,
                        discount: 0.2
                    },
                    {
                        name: "蒜",
                        price: 0.8,
                        discount: 0.8
                    }
                ]
            }
        }
    })