axios获取数据,vue不重新渲染

问题描述 :在面加载完之后从后台获取用户列表,发现axios数据可以获取,但是页面还是空白

代码

解决如下


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  <script src="https://unpkg.com/axios/dist/axios.min.js">script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
head>

<body>
  <div id="app">

    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th>Idth>
          <th>用户名th>
          <th>邮箱th>
          <th>电话th>
        tr>
      thead>
      <tbody>
        <tr v-for="(user,i) in list" :key="user.userId">
          <td>{{ user.userId }}td>
          <td v-text="user.username">td>
          <td>{{ user.email }}td>
          <td>{{ user.mobile }}td>

        tr>
      tbody>
    table>



  div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [ ]
      },
      methods: {
          queryList(){
            let _list = this.list;
            axios.get('http://localhost:8099/test/pageList')
                    .then(function (response) {
                      let result = response.data.data.page.records;
                      result.forEach(user=>{
                        _list.push(user);
                      })
                      //this.list = result;
                      //console.log(result);
                    })
                    .catch(function (error) {
                      console.log(error);
                    });
            this.list = _list;
          },
        },
      created (){
        this.queryList();

      },

    });
  script>
body>

html>

页面效果就不上了

2.阐述解决思路

1.要想页面加载完加载数据必须在适当的钩子函数里面加载,我用了created 函数
2.axios获取数据的里面直接用forEach的使用this.list的push方法会,报错push没有定义,
打印this之后发现this和vue的this并不一样,故此提前将vue的this提取出来

3.完

一个后端的vue之旅,如果有其他的处理方式可以与楼主分享

本文为原创文章,转载请注明出处。欢饮讨论
楼主邮箱 [email protected]
qq 2519946973
参考文章
1.vue钩子函数
2.axios发送请求demo

你可能感兴趣的:(前端,vue,vue,axiox)