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

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 上面评论的那样，你最好使用 Arrows 函数，这样 "this" 就会有你想要的范围。

mounted () {
}

然后您可以使用 "this".

正常访问所有数据属性

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

I am new to vue js ... can't display loaded data from a php file

vue.js

vue-resource