v-for prop 值未使用 bootstrap 模态更新

Question

我有以下代码片段

<div class="list-group-item media" v-for="evt in event">

    <eventmodal :currentevent = "evt"></eventmodal>

</div>

我面临的问题是在道具中，我总是得到第一个值。你能告诉我我在这里做错了什么吗？我正在使用 vuejs 2.0

此外，我想知道是否可以通过编程方式设置子组件的 props？

这是我的子组件的样子

    <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 事件。用户将创建事件并将它们呈现在日历控件上。

系统中目前有3个事件。所有这些都列在这里。我还可以保证它们确实在 v-for 的 "events" 中正确加载。它只是道具价值永远是第一位。在 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
  }
]

你能告诉我我做错了什么吗？

Answer 1

您可能需要添加 key in 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 添加 key 属性。

我希望 <eventmodal :currentevent = "evt"></eventmodal> 中的空格只是拼写错误，删除 :currentevent = "evt" 中的空格。

已编辑

你每次都显示相同的模态，正确传递了道具，但你每次都加载相同的模态。

您应该为每个模态设置 dynamic id，如下所示：

<eventmodal :id="evt.id" :currentevent="evt"></eventmodal>

当你展示这个时，你应该使用这个动态 ID，如下所示：

$("#" + event.id).modal()

v-for prop 值未使用 bootstrap 模态更新

v-for prop value not getting updated with bootstrap modal

javascript

twitter-bootstrap

vue.js

vuejs2

已编辑