Question

模板部分：

`<div class="col-sm-6" >
  <ul class="list-group" id="pos">
    <li class="list-group-item" v-for="(itm, index) in items">
      <strong>{{index}} : {{ itm.sub }}</strong> - {{ itm.price }}
    </li>
  </ul>
</div>`

脚本部分：

new Vue({
    el: '#pos',
    http: {
        root: '/vuetest',
        headers: {
          Authorization: 'Basic YXBpOnBhc3N3b3Jk'
        }
    },
    data: {
        items: []               
    },

    created:function () {
        this.$http.get('index.php').then(function(resp,status,request){
            this.items = resp.data;
            console.log(this.items); // got data but not displayed in  browser
        }.bind(this));
    }
});

我的源文件来自cdnjs.cloudeflare.com：

vue.js（2.1.4）
vue-resource.js（1.0.3）。

Answer 1

好吧，this不是that ...

created:function () {
    this.$http.get('index.php').then(function(resp,status,request){
        this.items = resp.data; // this is referring to the current function, and not to vue's scope.
        console.log(this.items); // got data but not displayed in  browser
    }.bind(this));
}

所以正确使用是：

created:function () {
    var self = this
    this.$http.get('index.php').then(function (resp,status,request) {
        self.items = resp.data;
        console.log(this.items);
    });
}

Answer 2

正如MU上面评论的那样，你可以更好地使用箭头功能，所以＆＃34;这个＆＃34;将拥有你想要的范围。

mounted () {
}

然后，您可以使用＆＃34;此＆＃34;。

正常访问所有数据属性

我是vue js的新手......无法显示来自php文件的加载数据

2 个答案: