vue.js - 如何使用 vuejs 和 axios 将数据显示到 v-data-table 中？

Question

我正在尝试从服务器获取数据条形码并显示在表格中。当我输入条形码编号并按回车键时，将在表格中获取并显示条形码详细信息。当我用 vuejs devtools 检查时，只得到有效的数据，但显示它不起作用，然后我得到了错误 [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, got Object found in ---> <VDataTable>

HTML 部分

<v-text-field v-model="editedItem.barcode" @keyup.enter="add" label="Barcode"></v-text-field>

<template>
  <v-data-table
    :headers="headerscode"
    :items="barcodes"
    class="elevation-1"
  >
    <template v-slot:items="barcodes">

      <td>{{ barcodes.namabarang }}</td>

      <td class="text-xs-right">{{ barcodes.expired }}</td>
      <td class="text-xs-right">{{ barcodes.jumlah }}</td>
      <td class="text-xs-right">{{ barcodes.harga }}</td>
      <td class="text-xs-right">{{ barcodes.disc }}</td>
      <td class="text-xs-right">{{ barcodes.disc_rp }}</td>
      <td class="text-xs-right">{{ barcodes.subtotal }}</td>
      <td class="text-xs-right">{{ barcodes.bonus }}</td>
    </template>
  </v-data-table>
</template>

脚本部分

import Constant from '@/const';

const axios = require('axios');

  export default {
    data: () => ({
headerscode: [
        {
          text: 'No.',
          value: 'index'
        },
        {
          text: 'NAMA BARANG',
          align: 'left',
          sortable: false,
          value: 'namabarang'
        },
        { text: 'EXPIRED', value: 'expired' },
        { text: 'JUMLAH', value: 'jumlah' },
        { text: 'HARGA @', value: 'harga' },
        { text: 'DISC %', value: 'disc' },
        { text: 'DISC RP.', value: 'disc_rp' },
        { text: 'SUBTOTAL', value: 'subtotal' },
        { text: 'BONUS', value: 'bonus' }
        ],


      barcodes: []
 })

methods {
add () {
        axios.get("http://api/goods/".concat(this.editedItem.barcode))
        .then(response => {
          console.log(response);
          this.barcodes = response.data
          })
                    .catch(e => {
                        console.log(e)
        })
        }
      }

控制台日志

{…}
​
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
​
data: Object { pesan: Getter & Setter, data: Getter & Setter, … }
​
headers: Object { "content-type": "application/json; charset=utf-8" }
​
request: XMLHttpRequest
​​
mozAnon: false
​​
mozSystem: false
​​
onabort: null
​​
onerror: function handleError()
​​
onload: null
​​
onloadend: null
​​
onloadstart: null
​​
onprogress: null
​​
onreadystatechange: function handleLoad()
​​
ontimeout: function handleTimeout()
​​
readyState: 4
​​
response: "{\"pesan\":\"Data Barang ditemukan\",\"data\":{\"id\":\"5c78d1a3074b24062c593c87\",\"data\":{\"detail\":{\"timestamps\":{\"created_at\":\"2019-03-01T13:33:22+07:00\",\"created_by\":\"5c614a0e11e2a6070e7d1b76\"},\"name\":\"Beras CHR Super\",\"barcode\":\"aaaa\",\"hna\":12,\"hpp\":12,\"min_stock\":500,\"category_name\":\"Bahan Makanan Kering\",\"type\":\"Gizi\",\"account\":\"1.1.6.3.2\",\"account_load\":\"5.1.3.3.2\"},\"detail_stock\":{\"timestamps\":{\"created_at\":\"2019-03-04T16:18:09+07:00\"},\"stock\":995,\"info\":\"Dikurangi 1\"}}}}"
​​
responseText: "{\"pesan\":\"Data Barang ditemukan\",\"data\":{\"id\":\"5c78d1a3074b24062c593c87\",\"data\":{\"detail\":{\"timestamps\":{\"created_at\":\"2019-03-01T13:33:22+07:00\",\"created_by\":\"5c614a0e11e2a6070e7d1b76\"},\"name\":\"Beras CHR Super\",\"barcode\":\"aaaa\",\"hna\":12,\"hpp\":12,\"min_stock\":500,\"category_name\":\"Bahan Makanan Kering\",\"type\":\"Gizi\",\"account\":\"1.1.6.3.2\",\"account_load\":\"5.1.3.3.2\"},\"detail_stock\":{\"timestamps\":{\"created_at\":\"2019-03-04T16:18:09+07:00\"},\"stock\":995,\"info\":\"Dikurangi 1\"}}}}"
​​
responseType: ""
​​
responseURL: "http://api/goods/aaaa"
​​
responseXML: null
​​
status: 200
​​
statusText: "OK"
​​
timeout: 0
​​
upload: XMLHttpRequestUpload { onloadstart: null, onprogress: null, onabort: null, … }
​​
withCredentials: false
​​
<prototype>: XMLHttpRequestPrototype { open: open(), setRequestHeader: setRequestHeader(), send: send(), … }
​
status: 200
​
statusText: "OK"
​
<prototype>: Object { … }

标签： vue.jsaxios