How to use dynamic data

[robertnicjoo]

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: &quot;sizes, prev, pager, next, jumper, ->, total, slot&quot; }">
            <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

[close-issue-app[bot]]

This issue is closed because it does not meet our issue template. Please read it.