如何使用 axios.get 渲染数据答案

【问题标题】：How can i render data using axios.get如何使用 axios.get 渲染数据
【发布时间】：2020-03-10 13:33:25
【问题描述】：

我正在使用 PHP 和 Axios 做一个小项目，我正在尝试使用 v-for 在 html 表格中呈现数据strong> 但它不起作用，因为我得到了服务器反馈，我的意思是我得到了 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 响应，但 VueJs 不会在 td 标记中呈现数据我得到一个空白 td

【问题讨论】：

有什么帮助吗？
我不是 Vue 方面的专家，但您似乎没有正确更新状态，因此当数据进入时组件不会重新渲染。它可能有事可做带有数组变化检测vuejs.org/v2/guide/list.html#Array-Change-Detection

标签： javascript php vue.js axios

【解决方案1】：

看起来你应该这样做......

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

你也不需要定义一个 self var 你可以使用它..

 created(){
  this.loadUsers(); 
 }

【讨论】：

【解决方案2】：

您是否尝试过使用计算属性，例如：

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

或者，如果您想获取数据，则可以在组件渲染上挂载是另一种选择

在 ES6 中你可以直接使用 this .... 可能在变量 self 中使用，它可能会出现范围问题？

created(){
     this.loadUsers(); 
  }

【讨论】：