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 []，我只显示了这些项目。

在Postman中这样的节目：

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

Answer 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>'
        }) 
  }

```

如何使用axios填充Vuetify DataTable

1 个答案: