php - 将 foreach 循环项从刀片传递到 vue 并获取每个循环项
问题描述
我使用 v-bind 刀片代码将 props 从刀片传递到 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">×</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 循环中获取所有项目 Prop 只给我刀片中 foreach 循环中的第一项,这不是我想要的......我希望每一行都给我与之相关的每个数据我该怎么做
解决方案
我认为你应该传递$user
而不是传递$user['email']
给组件。
<edit-user :user="{{$user}}"></edit-user>