如何使用 axios 填充 Vuetify DataTable

Question

我不知道为什么我的表没有填充 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"

Answer 1

您必须使用以下mounted：chk 此页面的源代码 ( 点击 确定 用默认模拟账户登录您... (

此示例具有用于服务器端分页和将 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>'
            }) 
      }