Question

我使用v-bind将道具从刀片传递到vue组件刀片代码：

@foreach ($users as $user)
    <tr>
        <td>{{$user->id}}</td>
        <td>{{$user->name}}</td>
        <td>{{$user->email}}</td>
        <td>{{$user->type}}</td>
        <td>{{$user->Region_name}}</td>
        <td>
            <div class="btn-group" role="group"> 
            <edit-user :user="{{$user['email']}}"></edit-user>
        </td>

Vue组件：

<button class="btn btn-outline-success" data-toggle="modal"
        @click="edit(user)" data-target='#exampleModalCenter' type="button">
    <i class="far fa-edit"></i></button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form @subit.prevent="updateuser" @keydown="form.onKeydown($event)">
            <div class="modal-body">
                <input type="hidden" name="id" v-model="form.id">

                <div class="form-group">
                    <input class="form-control" v-model="form.email" name="email"
                    placeholder="Email">
                </div>                                      
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </form>
        </div>
    </div>
</div>

 <script>
import VForm from 'vform';
import HasError from 'vform/src/components/HasError'
import AlertError from 'vform/src/components/AlertError'
export default {
    components:{HasError,AlertError},
    props:['user'],
    data(){
        return{
            form : new VForm({
                id:'',
                email:'',
                type:'',
                Region_name:''
            })
        }
    },
    methods:{
        edit(user){
            this.form.fill(user);
        },
        updateuser(){

        }
    }
}</script>

我如何从foreach循环中获取所有项目道具只给我刀片中的foreach循环中的第一项，不是我想要的... 我希望每一行都给我与之相关的每个数据我该怎么做

Answer 1

我认为您应该将$user而不是$user['email']传递给组件。

<edit-user :user="{{$user}}"></edit-user>

从刀片到Vue传递foreach循环项，并获取每个循环项

1 个答案: