How to use dynamic data
robertnicjoo opened this issue · comments
Please follow the issue template, or your issue may be closed automatically.
For bug report, provide the following section
Online reproduce
It is important to provide an online sample to reproduce the issue.
- Template for reproducing front-end pagination issue
- Template for reproducing server-end pagination issue
Expected Behavior
Show dynamic data in table
Current Behavior
Nothing prints in table
Detailed Description
My view
<el-row style="margin-bottom: 10px">
<el-col :span="5">
<el-dropdown @command="handleClick">
<el-button type="primary">Actions<i class="el-icon-caret-bottom el-icon--right"></i></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="new">New</el-dropdown-item>
<el-dropdown-item command="import">Import</el-dropdown-item>
<el-dropdown-item command="export">Export</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="10">
<el-select v-model="filters[1].value" placeholder="select type" multiple="multiple">
<el-option label="Repair" value="repair"></el-option>
<el-option label="Help" value="help"></el-option>
</el-select>
</el-col>
<el-col :span="5" :offset="4">
<el-input v-model="filters[0].value">
</el-input></el-col>
</el-row>
<data-tables :data="products" :action-col="actionCol" :table-props="tableProps" :pagination-props="{ layout: "sizes, prev, pager, next, jumper, ->, total, slot" }">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column v-for="product in products" :prop="product.prop" :label="product.label" :key="product.prop" sortable="custom">
</el-table-column>
</data-tables>
My function
export default {
data() {
return {
type: '',
products: [],
tableProps: {
border: true,
stripe: true,
defaultSort: {
prop: 'id',
order: 'descending'
}
},
actionCol: {
label: 'Actions',
props: {
align: 'center',
},
buttons: [{
props: {
type: 'primary',
size: 'small',
icon: 'el-icon-edit'
},
handler: row => {
this.$message('Edit clicked')
row.flow_no = 'hello word' + Math.random()
row.content = Math.random() > 0.5 ? 'Water flood' : 'Lock broken'
row.flow_type = Math.random() > 0.5 ? 'Repair' : 'Help'
},
label: 'Edit'
}, {
props: {
type: 'danger',
size: 'small',
icon: 'el-icon-trash'
},
handler: row => {
this.data.splice(this.data.indexOf(row), 1)
},
label: 'delete'
},{
props: {
type: 'secondary',
size: 'small',
icon: 'el-icon-eye'
},
handler: row => {
// this.data.splice(this.data.indexOf(row), 1)
},
label: 'show'
}]
},
filters: [{
value: '',
prop: 'flow_type',
}, {
value: []
}],
site_name: process.env.MIX_APP_NAME
}
},
beforeRouteEnter (to, from, next) {
const token = localStorage.getItem('access_token')
return token ? next() : next('/login')
},
created () {
this.fetchAuthenticatedUser()
},
mounted() {
this.getProducts();
},
methods: {
fetchAuthenticatedUser () {
axios
.get('/api/auth/user', {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('access_token')
}
})
.then(response => {
this.type = response.data.type
if(response.data.type !== 'admin') {
this.$router.push({name: 'home'})
}
})
.catch(function (error) {
console.log('error', error);
});
},
getProducts () {
axios
.get('/api/admin/products', {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('access_token')
}
})
.then(response => {
console.log('responses', response.data);
this.products = response.data.data;
})
.catch(function (error) {
console.log('error', error);
});
},
handleClick(command) {
this.$message(`click dropdown button ${command}`)
},
onCreate() {
this.products.push({
content: "new created",
flow_no: "FW201601010003" + Math.floor(Math.random() * 100),
flow_type: "Help",
flow_type_code: "help"
})
},
handleSelectionChange(val) {
this.selectedRow = val
},
bulkDelete() {
this.selectedRow.map(row => {
this.products.splice(this.products.indexOf(row), 1)
})
this.$message('bulk delete success')
}
}
}
Data
Result
Any idea?
For feature request, provide the following section
Motivation / Use Case
Laravel / Vue app
Expected Behavior
Other Information
This issue is closed because it does not meet our issue template. Please read it.