vuejs如何根据动态数组值显示div?

时间:2017-03-17 05:52:31

标签: javascript vue.js

如果点击了任何用户链接,我想显示/隐藏新的div:

event_type

方法是:

full_calender = $('#calendar').fullCalendar({
           header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,listWeek,listDay'
			},
			views: {
				listDay: { buttonText: 'List View' },
				listWeek: { buttonText: 'Week View' },
				month: { buttonText: 'Month View' },
			},
            defaultDate: default_date,
            editable: true,
            selectable: true,
            selectHelper: true,
            eventLimit: true, // allow "more" link when too many events
            eventResourceEditable: true,
            /*select: function (start, end) {
                addSelectedEvent(start, end);
            },*/
            eventConstraint: {
                start: moment().format('YYYY-MM-DD HH:mm'),
                end: '2100-01-01' // hard coded goodness unfortunately
            },
            dragRevertDuration: 1000,
			eventDrop: function(event, delta,revertFunc) {
				//if (!confirm('Are you sure '+ event.title + ' Moved On  '+event.start.format())) {
					//updateDroppableEvent(event.id,event.start.format());
					var data = {
						'action_update_droppable_event' : 'yes',
						'event_id' : event.id,
						'move_date' : event.start.format(),
					};
					$.ajax({
						URL : '',
						method : 'POST',
						data : data,
						dataType: 'json',
						success : function(res){
							if(res.status == 'success'){
								$('#calendar').fullCalendar( 'renderEvent', event  );
							}else{
								alert(res.msg);
								revertFunc();	
								//window.location.reload();
							}
						},
						error : function(res){
							//console.log(res);	
						}
					});
			},
            eventSources: [
                {
                    url: base_url + 'admin_dashboard/render_current_events',
					//url: base_url + 'admin_dashboard/get_holiday_list',
                    type: 'POST',
                    data: {
                        zone_id: '<?php echo $_REQUEST['zone_id'] ?>',
                        custom_param2: 'somethingelse'
                    },
                    error: function () {
                        alert('there was an error while fetching events!');
                    }
                }
            ],
			/* Delete Event */
			eventClick: function (calEvent, jsEvent, view) { 
				deleteSelectedEvent(calEvent);
            },
            eventAfterAllRender: function (view) {
                //$(".fc-event-container a").append("<span class='event_edit_popup'><i class='icon-eye-open'></i></span>");
//            events: base_url + 'admin_dashboard/get_holiday_list',
            }
        });

用户数据存储在Style style = new Style(typeof (GridView)); style.Setters.Add(new Setter(GridView.Property, xx)); GridView.Style=style ; ,我可以验证它是否已正确填充。

应该显示/隐藏的窗口是这样的,并且不在上面的<ul id="pm-tabs"> <li v-for="user in unreadMsgsList"> <a @click="openPMbox(user)"> ${user}</a> </li> </ul> 循环中:

    openPMbox: function(user) {              
         this.isPmBoxOpenList[user] = !this.isPmBoxOpenList[user];
    }, 

但我在模板上遇到错误。不确定我应该如何定义isPmBoxOpenList: [],所以要感谢您的提示。

P.S。值得一提的是v-for未在<div class="pmbox" v-bind:disabled=="isPmBoxOpenList" >Some Text </div> 中定义。它只是pmbox数组中的一个对象。

1 个答案:

答案 0 :(得分:2)

您可以使用v-if来显示或隐藏:

<div class="pmbox" v-if="isPmBoxOpenList[user]" >Some Text </div>