我如何使用axios.get呈现数据

时间:2019-11-14 14:41:27

标签: javascript php vue.js axios

我正在使用 PHP Axios 进行一个小型项目,我正尝试使用 v-for 将数据呈现在html表中,但自从我收到服务器反馈以来,它不起作用,我的意思是我正确地收到了 json 响应 当我做<td>{{user.id}}</td>时,我会得到黑色td 这是我的代码 有问题的功能是 loadUsers

export default{
  data(){
     return {
        users : {}
     }
  },
  methods:{
     addCustomer(){
        //var form = document.querySelector('#add-customer');
        var formData = $('#add-customer').serialize();
        axios.post('/Thirdparty', formData).then(function(response){
           helper.validation(response.data);
           //alert(response.data.error);
        });
     },
     loadUsers(){
        axios.get('/Thirdparty/loadUsers').then((data) => {
           this.users = data.data;
        });
     }
  },
  created(){
     let self = this;
     self.loadUsers(); 
  }
}

我的PHP代码:

public function loadUsers(){
    echo $this->data['users'] = json_encode(array('id' => 1));
}

我的HTML代码:

<tr v-for="user in users" :key="user.id">
    <td>{{user.id}}</td>
</tr>

控制台中的结果是正确的,但是我可以正确地看到json响应,但是VueJ不会在td标记中呈现数据,我会得到一个空白的td

2 个答案:

答案 0 :(得分:0)

您似乎应该这样做...

AbsenceResourceAcceptanceTest.rollbackTest

您也不需要定义自变量,就可以使用此变量。

loadUsers(){
    axios.get('/Thirdparty/loadUsers').then((res) => {
       this.users = res.data.users;
    });
 }

答案 1 :(得分:0)

您尝试使用计算属性,如下所示:

computed: {
   loadUsers(){
    axios.get('/Thirdparty/loadUsers').then((res) => {
       this.users = res.data.users;
    });
 }
}

或者,如果您要获取数据,则可以选择在组件渲染上安装

在ES6中,您可以直接使用此....也许可以在varibale self内部使用它,这可能会引起范围问题?

created(){
     this.loadUsers(); 
  }