控制台访问不到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                     }                 ]             }         }     })