Question

我正在尝试从服务器获取数据条形码并显示在表格中。当我键入条形码编号并按Enter时，将在表中获取并显示条形码详细信息。当我使用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)
        })
        }
      }

console.log

{…}

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 { … }

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

0 个答案: