Question

我有两个表组件，一个是使用axios提取记录，我希望另一个表组件在单击父组件上的编辑按钮后获取记录。我已经尝试使用Vue提供的父子组件通信，但是它不适用于该表。第一个表格组件

<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);
    }
}

第二个表格组件

 <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() {

    }
}

Answer 1

在表1中的axios请求之后获取数据时，您必须发出一个事件，以便父级可以访问它。

所以在表1：

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

这将触发组件中的事件，父级可以通过 v-on （或@）访问该事件：

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

您需要在父级中创建一个空对象，并作为道具传递到表2 ，直到收到axios请求值：

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

父级中的

updateTableTwo（）方法（默认情况下会传递事件参数）：

updateTableTwo(event) {
   this.tableData = event
   //event will contain the passed data from table 1
}

如何通过Vue将数据从表组件传递到另一个表组件，并使用编辑按钮传递表中的每一行

1 个答案: