如何使用 axios 填充 Vuetify 数据表答案

【问题标题】：How to populate a Vuetify DataTable with axios如何使用 axios 填充 Vuetify 数据表
【发布时间】：2018-04-17 22:10:18
【问题描述】：

我不知道为什么我的表没有填充 axios，这是我的 DataTable 模板，就像文档一样：

    <v-data-table
    :headers="headers"
    :items="items"
    hide-actions
    class="slideInDown"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.nombre }}</td>
      <td class="text-xs-right">{{ props.item.calle }}</td>
      <td class="text-xs-right">{{ props.item.numExterior }}</td>
      <td class="text-xs-right">{{ props.item.numInterior }}</td>
      <td class="text-xs-right">{{ props.item.codigoPostal }}</td>
    </template>
  </v-data-table>

这是我的脚本：

<script>
export default {
  data () {
    return {
        items: [
         {
           nombre: "",
           calle: "",
           numExterior: "",
           numInterior:"",
           codigoPostal: "",
         }
        ],
    }
  },

  methods:{

     }
created(){

  axios.get('http://localhost:58209/api/GetEstaciones', 
  { 
    headers: 
    {
     "Authorization": "Bearer "+localStorage.getItem('token') 
    }
  }).then(response => {
    this.items = response.data;
  }).catch(error => {
    console.log(error.response)
  });
},
  mounted(){
      let token = localStorage.getItem('token');
      if(token == null){
          this.$router.push('/');
      }
  },

}
</script>

但是该表没有填充，当我在 Visual Studio 中调试我的 WebAPI 时，即使使用 Postman，它也在使用 Get 方法。在我的脚本中，我省略了 heders[]，我只显示项目。

在这样的邮递员节目中：

    "calle": "AVENIDA BLA",
    "numExterior": 121,
    "numInterior": 2,
    "codigoPostal": 123456,
    "nombre": "ASDFGGHJKL"

【问题讨论】：

你的控制台有错误吗？
@Hammerbot 只显示未定义，但我重写了我的 Get 方法，现在它正在工作。
axios.get('localhost:58209/api/GetEstaciones', { headers:{ "Authorization": "Bearer "+localStorage.getItem('token') } }) .then(response => { console. log(response) this.items = response.data; }) .catch(error => { console.log(error.response) });

标签： vue.js axios vuetify.js

【解决方案1】：

您必须使用 mounted ： chk the source code of this page（点击确定，用默认的模拟账户登录你...）

这个例子有额外的逻辑 for server side paging 并将 url 参数替换到后端，但它可能会帮助您更好地掌握事件流......

简答（没有错误处理，没有分页等）：

        const vm = new Vue({
          el: '#app',
          data: {
            monthly_issues: []
          },
          mounted() {
            // this is the url of the back-end spitting out json
            axios.get("/tst_issue_tracker/select/monthly_issues")
            .then(response => {this.monthly_issues = response.data.dat
            })
          }

        })

长答案：


     mounted() {
            var url_params = {} 
         if( window.location.toString().indexOf("?") != -1) {
            window.location.search.split('?')[1].replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
               url_params[decodeURIComponent(key)] = decodeURIComponent(value);
            });
         } else {
            url_params = { as:"lbls" };  
         }
         this.UrlParams = url_params;
            axios.get((window.location.pathname).replace("/list/" , "/select/") , { params: url_params } )
            .then(response => { 
                this.gridData = response.data.dat ; 
                this.pageSize = url_params['page-size'] || 10 ; 
                this.pageNum = url_params['page-num'] || 1 ; 
            var totalRSsize = response.data.met ; 
            var remainder = totalRSsize % this.pageSize
            var toAdd = 1 // page-size 10 , total-rs-size 30 => 3 and not 4
            if ( remainder == 0 ) { toAdd = 0  }
                this.pagesCount = Math.floor(totalRSsize/this.pageSize ) + toAdd
            })
            .catch(function(error) {
                document.getElementById("div_msg").innerHTML="<span id=\"spn_err_msg\">" + error.response.data.msg + '</span>'
            }) 
      }

【讨论】：