我有以下代码段
<div class="list-group-item media" v-for="evt in event">
<eventmodal :currentevent = "evt"></eventmodal>
</div>
我面临的问题是，在道具中，我总是得到第一个值。你能告诉我这里我做错了什么吗？我正在使用vuejs 2.0
另外，我想知道我是否可以通过编程方式设置子组件的道具？
这是我的子组件的外观
<template>
<div class="card content">
<h4 class="modal-title">
<span v-if="currentevent">{{currentevent.title}}</span>
<span v-else>New Event</span>
</h4>
<div class="form-group">
<input type="text" placeholder="enter event title here" class="form-control" v-model="title">
<i class="form-group__bar"></i>
</div>
<textarea class="note-view__body" id="eventDescription" v-model="description" placeholder="enter event description"></textarea>
<div class="form-group">
<input type="text" placeholder="enter organizer name here" class="form-control" v-model="organizer">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="start date" class="form-control" v-model="startdate">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="end date" class="form-control" v-model="enddate">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="email" class="form-control" v-model="email">
<i class="form-group__bar"></i>
</div>
<div class="form-group">
<input type="text" placeholder="phone" class="form-control" v-model="phone">
<i class="form-group__bar"></i>
</div>
<div class="card-footer">
<button type="button" v-on:click="clear()" class="btn btn-link" data-dismiss="modal">Close</button>
<button type="button" v-on:click="performSave()" class="btn btn-link">Save</button>
</div>
</div>
</template>
<script>
export default {
props:['currentevent'],
data() {
return {
title: '',
description: '',
organizer: '',
startdate: '',
enddate: '',
email: '',
phone: ''
}
},
mounted() {
this.makeTextBoxReady();
},
methods: {
makeTextBoxReady: function() {
$(document).ready(function() {
if (!$('html').is('.ie9')) {
if ($('.note-view__body')[0]) {
$('.note-view__body').trumbowyg({
autogrow: true,
btns: [
'btnGrp-semantic', ['formatting'],
'btnGrp-justify',
'btnGrp-lists', ['removeformat']
]
});
}
}
});
},
performSave : function() {
let description = $('#eventDescription').trumbowyg('html');
let formData = new FormData();
formData.append('title',this.title);
formData.append('desciption',description);
formData.append('startdate',this.startdate);
formData.append('enddate',this.enddate);
formData.append('organizer',this.organizer);
formData.append('email',this.email);
formData.append('phone',this.phone);
// formData.append('X-CSRF-TOKEN',document.querySelector('#_token').getAttribute('content'));
console.log("going to save event information");
this.$http.post('/admin/event/create', formData).then(response => {
console.log(response);
if(response.data.status==200) {
alert(response.data.message);
this.$emit('get_events');
}
})
},
clear: function() {
this.title = '';
this.description = '';
this.organizer = '';
this.startdate = '';
this.enddate = '';
this.email = '';
this.phone = '';
}
}
}
</script>
事件（正在迭代）......
事件（在我的应用程序的上下文中）是一件事，就像Google Events一样。用户将创建事件，它们将在日历控件上呈现。
系统目前有3个事件。所有这些都列在这里。我还可以保证他们确实在＆＃34;事件＆＃34;中得到了适当的加载。在v-for中。它的唯一值就是第一个。在VueJs 1.0中，我可以很容易地进行同步，它会将道具与正在迭代的正确值同步，但我相信它们已经被带走了。
[
{
"id": 2,
"title": "15-17",
"desciption": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, deserunt.",
"eventscategory_id": 1,
"startdate": "2016-10-11 03:09:15",
"enddate": "2016-10-17 19:12:15",
"organizer": "another user",
"street": null,
"street2": null,
"city": null,
"province": null,
"country": null,
"phone": null,
"email": "test123@test.com",
"fax": null,
"created_at": "2015-09-21 19:12:15",
"updated_at": "2016-12-11 10:51:53",
"deleted_at": null
},
{
"id": 19,
"title": "latest event",
"desciption": "",
"eventscategory_id": 1,
"startdate": "2017-01-01 00:00:00",
"enddate": "2017-01-03 00:00:00",
"organizer": "a user",
"street": null,
"street2": null,
"city": null,
"province": null,
"country": null,
"phone": "5197293401",
"email": "auser@gmail.com",
"fax": null,
"created_at": "2016-12-16 06:32:53",
"updated_at": "2016-12-16 06:32:53",
"deleted_at": null
},
{
"id": 23,
"title": "check for description",
"desciption": "",
"eventscategory_id": 1,
"startdate": "2017-10-10 00:00:00",
"enddate": "2017-10-10 00:00:00",
"organizer": "test organizer",
"street": null,
"street2": null,
"city": null,
"province": null,
"country": null,
"phone": "12345",
"email": "test@test.com",
"fax": null,
"created_at": "2016-12-16 06:43:04",
"updated_at": "2016-12-16 06:43:32",
"deleted_at": null
}
]
你能告诉我这里的错误吗？
答案 0 :(得分：2)
您可能需要在key
中添加v-for<div class="list-group-item media" v-for="evt in event" :key="evt.id">
<eventmodal :currentevent="evt"></eventmodal>
</div>
为了提高性能，v-for使用“就地补丁”策略，列表渲染在子组件状态或临时DOM状态更改时不会更改。要跟踪这些更改，您需要使用v-for添加键属性。
我希望<eventmodal :currentevent = "evt"></eventmodal>中的空格只是拼写错误，从:currentevent = "evt"中移除空格。
每次都显示相同的模态，道具正确传递，但每次都加载相同的模态。
每个模式应该有dynamic id，如下所示：
<eventmodal :id="evt.id" :currentevent="evt"></eventmodal>
当您显示此内容时，您应该使用以下动态ID：
$("#" + event.id).modal()