v-for 道具值未使用引导模式更新 [英] v-for prop value not getting updated with bootstrap modal

查看：32
本文介绍了v-for 道具值未使用引导模式更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下代码片段

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

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

另外，我想知道是否可以以编程方式设置子组件的道具?

这是我的子组件的外观

 <模板><div class="卡片内容"><h4 class="modal-title"><span v-if="currentevent">{{currentevent.title}}</span><span v-else>新活动</span><div class="form-group"><input type="text" placeholder="在此处输入事件标题" class="form-control" v-model="title"><i class="form-group__bar"></i>

<textarea class="note-view__body" id="eventDescription" v-model="description" placeholder="输入事件描述"></textarea><div class="form-group"><input type="text" placeholder="在此处输入组织者名称" class="form-control" v-model="organizer"><i class="form-group__bar"></i>

<div class="form-group"><input type="text" placeholder="start date" class="form-control" v-model="startdate"><i class="form-group__bar"></i>

<div class="form-group"><input type="text" placeholder="end date" class="form-control" v-model="enddate"><i class="form-group__bar"></i>

<div class="form-group"><input type="text" placeholder="email" class="form-control" v-model="email"><i class="form-group__bar"></i>

<div class="form-group"><input type="text" placeholder="phone" class="form-control" v-model="phone"><i class="form-group__bar"></i>

<div class="card-footer"><button type="button" v-on:click="clear()" class="btn btn-link" data-dismiss="modal">关闭</button><button type="button" v-on:click="performSave()" class="btn btn-link">保存</button>

<脚本>导出默认{道具:['当前事件']，数据() {返回 {标题: ''，描述: ''，组织者: ''，开始日期: ''，结束日期: ''，电子邮件: ''，电话: ''}},安装(){this.makeTextBoxReady();},方法: {makeTextBoxReady:函数(){$(document).ready(function() {如果 (!$('html').is('.ie9')) {如果 ($('.note-view__body')[0]) {$('.note-view__body').trumboyg({自动增长:真的，btns: ['btnGrp-语义', ['格式化'],'btnGrp-justify','btnGrp-lists', ['removeformat']]});}}});},执行保存:函数(){let description = $('#eventDescription').trumboyg('html');让 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("要保存事件信息");this.$http.post('/admin/event/create', formData).then(response => {控制台日志(响应)；如果(响应.数据.状态== 200){警报(响应.数据.消息)；this.$emit('get_events');}})},清除:函数(){this.title = '';this.description = '';this.organizer = '';this.startdate = '';this.enddate = '';this.email = '';this.phone = '';}}}

事件(正在迭代)......

事件(在我的应用程序上下文中)是发生的事情，很像 Google Events.用户将创建事件并将它们呈现在日历控件上.

系统中目前有 3 个事件.所有这些都在这里列出.我还可以保证它们确实在 v-for 的事件"中正确加载.它只是 prop 值总是第一个.在 VueJs 1.0 中，我可以轻松地进行同步，它会将 prop 与正在迭代的正确值同步，但我相信它们已被带走.

<预><代码>[{身份证":2，"title": "15-17","desciption": "Lorem ipsum dolor sat amet, consectetur adipisicing elit.Animi，deserunt.",eventscategory_id":1，"开始日期": "2016-10-11 03:09:15","enddate": "2016-10-17 19:12:15","组织者": "另一个用户",街道":空，street2":空，城市":空，省":空，国家":空，电话":空，"email": "test123@test.com",传真":空，"created_at": "2015-09-21 19:12:15","updated_at": "2016-12-11 10:51:53",deleted_at":空},{身份证":19，"title": "最新活动","描述": "",eventscategory_id":1，"开始日期": "2017-01-01 00:00:00","enddate": "2017-01-03 00:00:00","组织者": "用户",街道":空，street2":空，城市":空，省":空，国家":空，"电话": "5197293401","email": "auser@gmail.com",传真":空，"created_at": "2016-12-16 06:32:53","updated_at": "2016-12-16 06:32:53",deleted_at":空},{身份证":23，"title": "检查描述","描述": "",eventscategory_id":1，"开始日期": "2017-10-10 00:00:00","enddate": "2017-10-10 00:00:00","organizer": "考试组织者",街道":空，street2":空，城市":空，省":空，国家":空，"电话": "12345","email": "test@test.com",传真":空，"created_at": "2016-12-16 06:43:04","updated_at": "2016-12-16 06:43:32",deleted_at":空}]

你能告诉我我在这里做错了什么吗?

解决方案

您可能需要添加 v-for

键>

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

为了提升性能，v-for 使用了就地补丁"策略，并且列表渲染不会在子组件状态或临时 DOM 状态更改时发生变化.要跟踪这些更改，您需要使用 v-for 添加关键属性.

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

<小时>

已编辑

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

您应该为每个模态设置动态ID，如下所示:

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

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

I have the following code snippet 

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

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

</div>

The problem that I am facing is that in the prop, I am always getting the first value. Can you please let me know what I am doing wrong here? I am using vuejs 2.0

Also, I am wondering if I can set the props of a child component programmatically?

This is how my child component looks 

    <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>

Events (which are being iterated) ...

An event (in context of my application) is a thing that happens, much like Google Events. The user will create events and they will be rendered on a calendar control.

There are currently 3 events in the system. All of them are listed here. I can also vouch for the fact that they do get loaded up properly in the "events" in the v-for. Its just the prop value is always the first one. In VueJs 1.0 i could easily do sync and it would sync the prop with the correct value that was being iterated , but I beleive that they have been taken away. 

[
  {
    "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
  }
]

Can you please let me know what I am doing wrong here?

解决方案

You may need to add key in v-for

<div class="list-group-item media" v-for="evt in event" :key="evt.id">
    <eventmodal :currentevent="evt"></eventmodal>
</div>

For the improvement of performance, v-for uses an "in-place patch" strategy and list rendering will not change on child component state or temporary DOM state changes. To track these changes you need to add key attribute with v-for.

I hope spaces are just typo in <eventmodal :currentevent = "evt"></eventmodal>, remove spaces from :currentevent = "evt".

Edited

You are showing same modal everytime, props are being passed correctly, but you are loading the same modal each time.

You should have dynamic id for each modal like following:

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

and when you are showing this, you should use this dynamic id as following:

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

这篇关于v-for 道具值未使用引导模式更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆