vue渲染数据失败

Question

html部分
<ul id="shoucangLists">

            <template v-for="item in lists">
                <li class="shoucang_list no-edit" id="item.idNum">
                    <a href="" style="display:block;">
                        <div class="container o_hidden">
                            <u class="label lt"></u>
                            <div class="content gt o_hidden">
                                <div class="pic lt">
                                    <img :src="item.urlPic" alt=""/>
                                    <p>已下架</p>
                                </div>
                                <div class="text gt">
                                    <p>{{item.intro}}</p>
                                    <div class="o_hidden">
                                        <span class="lt">￥{{item.price}}</span>
                                        <s class="gt"></s>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </li>
            </template>
        </ul>

js请求：
new Vue({

el:'#shoucangLists',
data:{
    lists:[]
},
created:function(){
    axios.get('js/data.json')
        .then(function(response){
            this.lists=response.data.shoucangLists;
        })
        .catch(function(error){
            console.log(error);
        });
}

})

页面完全没有数据显示，json数据显示已经加载，也没有报错。是哪里的问题呢？

Answer 1

created:function(){
var _this = this
    axios.get('js/data.json')
        .then(function(response){
            _this .lists=response.data.shoucangLists;
        })
        .catch(function(error){
            console.log(error);
        });
}