在 laravel 上使用 json 表 vue.js

Question

我正在尝试使用 vue.js 将结果从 json 显示到表中 我没有结果这是脚本：

    <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h4 class="title">Progress Queue's details Live</h4>
          </div>
          <div class="card-content table-responsive table-full-width">
            <el-table :data="tableData2">
              <el-table-column label="Name" property="name"></el-table-column>
              <el-table-column class="danger" label="Numbers"       property="numbers"></el-table-column>
            </el-table>

          </div>
        </div>
      </div>

<script>

  import ChartCard from 'src/components/UIComponents/Cards/ChartCard.vue'
  Vue.use(Table)
  Vue.use(TableColumn)
  const WorldMap = () => ({
    component: import('./../Maps/WorldMap.vue'),
    loading: Loading,
    delay: 200
  })


 import axios from 'axios';
 import Vue from 'vue'
 import {Table, TableColumn} from 'element-ui'
 Vue.use(Table)
 Vue.use(TableColumn)
 // Vue.use(tableRowClassName)

import vSelect from 'vue-select';
//Vue.component('v-select', VueSelect.VueSelect)

  export default {
    components: {
      vSelect,
      StatsCard
    },

    data () {

      return {
     tableData2: [],
},
      mounted() {


    axios.get("/statcard").then(response => {
      this.tableData2.push({

          name: response.data.queue,
          numbers: reponse.data.queue_count


      });
    });
}
    }

我没有收到任何数据 json的结果是：

{"queue_count":"4","queue":"OP_AD_WIN_HARDWARE"},{"queue_count":"35","queue":"OPBO_WIN_Fiber_pend_i"},{"queue_count":"5","queue":"OP_AD_WIN_RELOCATION"},{"queue_count":"44","queue":"OPBO_WIN_Act_pend_i"}]}

Answer 1

从data 中删除mounted。 不要多次添加插件。 element 文档说，prop 是正确的，而不是 property。

处理行缩进。

<template>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h4 class="title">Progress Queue's details Live</h4>
            </div>
            <div class="card-content table-responsive table-full-width">
                <el-table :data="tableData2">
                    <el-table-column label="Name" prop="queue_count"></el-table-column>
                    <el-table-column class="danger" label="Numbers" prop="queue"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import vSelect from 'vue-select';
import axios from 'axios';
import { Table, TableColumn } from 'element-ui';
import ChartCard from 'src/components/UIComponents/Cards/ChartCard.vue';

Vue.use(Table);
Vue.use(TableColumn);

const WorldMap = () => ({
  component: import('./../Maps/WorldMap.vue'),
  loading: Loading,
  delay: 200
});

export default {
  components: {
    vSelect,
    StatsCard
  },

  data() {
    return {
      tableData2: []
    };
  },
  mounted() {
    axios.get('/statcard').then(response => {
      this.tableData2 = response.data.queue_progress;
    });
  }
};
</script>