how pass data from a table component in vue to another table component passing each row in the table with an edit button

问题: i have two table component one fetch it records using axios and i want the other table component to get records after I click on the edit button on the parent component. I...

问题:

i have two table component one fetch it records using axios and i want the other table component to get records after I click on the edit button on the parent component. I already tried using the parent to child component communication vue provides but it didn't work with the table. the 1st table component

<div><table class="table table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>Request NO</th>
                        <th>User name</th>
                        <th>Product</th>
                        <th>Requested Quantity</th>
                        <th>Approved Quantity</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                    </thead> <tbody>
                    <tr v-for="temp in reques " >
                        <td>{{temp.operation_id}}{{temp.user_id}}</td>
                        <td>{{temp.user_id}}</td>
                        <td>{{temp.product_name}}</td>
                        <td>{{temp.rquantity}}</td>
                        <td>{{temp.aquantity}}</td>
                        <td>{{temp.status}}</td>
                        <td>{{temp.created_at}}</td>
                        <td>
                            <div role="group" class="btn-group">
                                <button class="btn btn-info" @click="edit(temp)"
                                        type="button">
                                    <i class="fa fa-edit"></i>
                                </button>
                                <button class="btn btn-danger" type="button">
                                    <i class="fa fa-trash"></i>
                                </button>

                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>div class="col">
    <approved :form="form"></approved>
</div></div>

import VForm from 'vform'
import AlertError from "vform/src/components/AlertError";
import HasError from "vform/src/components/HasError";
import approved from "./approved";
import operationcreate from "./create" export default {
    components: {HasError, AlertError,
        approved,operationcreate,
    },
    data() {
        return {
            reques: [],
            here: [],
            form: new VForm({
                operation_id:'',
                product_name:'',
                rquantity: '',
                aquantity:'',
                status:'',
                created_at:'',
                user_id:''
            })
        }
    },
    methods:{
        edit(temp){
            this.form.fill(temp);
        }
    },
    created() {
        axios.get('/request-list')
            .then(({data}) => this.reques = data);
    }
}

the second table component

 <div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Quick Access</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th> Product Name</th>
                    <th> Request Quantity </th>
                    <th> Approved Quantity</th>
                    <th> Status</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="temp in form">
                    <td>1</td>
                    <td>{{temp.rquantity}}</td>
                    <td>{{temp.aquantity}}</td>
                    <td>{{temp.status}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
export default {
    props: ['form'],
    data() {
        return {

        }
    },
    methods: {},
    created() {

    }
}


回答1:

You have to emit an event when you get the data after axios request in table 1 so the parent can access it.

So in Table 1:

created() {
        axios.get('/request-list')
            .then(({data}) => {
                this.reques = data
                this.$emit("dataRecieved",data)
             });
    }

This will fire an event in the component that can be accessed by the v-on(or @) by the parent:

<table-component-1 @dataRecieved="updateTableTwo" ></table-component-1>

You'll need to create an empty object in the parent and pass to table 2 as a prop until the axios request value is received:

<table-component-2 :myData="tableData" ></table-component-1>

updateTableTwo() method in the parent (the event parameter is passed by default):

updateTableTwo(event) {
   this.tableData = event
   //event will contain the passed data from table 1
}
  • 发表于 2019-02-25 23:34
  • 阅读 ( 190 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除