table vue.js with json on laravel - json

Question

I am trying to show result from json to table with vue.js
i have no result this is the script:
<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
});
});
}
}
i recieve no data
the result of the json is :
{"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

Remove mounted from data.
Don't add plugins multiple times.
The element documentation says, that prop is correct, not property.
Work on your line indentation.
<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>