Цикл внутри v-if?

Question

[Gregory]

Добрый день как правильно прописать условие внутри директивы v-if?
Мне необходимо сравнить два значения и если true отрисовывать блок.

выглядит так:

<div class="event" v-if="date.activities && date.activities.length > 0 && types.id == date.activities[i].type_id"></div>

Часть начального кода с v-for я пропустил.
Условие словами следующее: если объект activities есть и он не пустой сравнить types.id с type_id и там где они равны отрисовать div с классом event.
Просто объясните как внутри v-if вызвать цикл, чтобы он просмотрел все объекты activities?

Answer 1

[0xD34F]

Часть начального кода с v-for я пропустил.

Это зря - непонятно, что такое date и types.

Предположу, что вам следует заменить это:

types.id == date.activities[i].type_id

на вот это:

date.activities.every(n => n.type_id == types.id)

Comments

[Gregory]

что-то похожее я пробовал не совсем сработало.. вот весь код:

<div class="cal-header-m cal-title" v-for="types in activityTypes">
			<span>{{types.name}}</span>
		</div>
		<div class="cal-table-m row visible-lg" v-for='date in dayList.slice(offset, offset + perPageLg)'>
			<div class="day-week">
				<span >
		            {{date.dayWeekName}}
		        </span>
			</div>
			<div class="day" :class="{
	            todayM: date.status ? (today == date.date) : false,
	            eventM: date.status ? (date.activities && date.activities.length>0) : false,
	            [calendar.options.className] : (date.date == selectedDay)}">
				<span>{{date.status ? date.date.split('/')[2] : '&nbsp'}}</span>
			</div>
			<div></div>
			<div class="one-item" v-for="types in activityTypes">
				<div class="event-data" v-if="date.activities && date.activities.length > 0 && date.activities.every(n => n.type_id == types.id)"></div>
				<div class="event-data-empty"  v-else=""></div>
				<div class="event-data-empty"  v-if="!date.activities || date.activities.length == 0"></div>
			</div>
		</div>

при том, что вы написали, при рендеринге отображается если только в дате было одно activities, а там где их было несколько он ничего не отображает (

[0xD34F]

Gregory, ну а в каких случаях элемент должен рендериться?

отображается если только в дате было одно activities, а там где их было несколько он ничего не отображает

То есть, нужен хотя бы один type_id равный types.id? Тогда замените every на some.

Вот этот вот кусок вообще не понял:

<div class="event-data" v-if="date.activities && date.activities.length > 0 && date.activities.every(n => n.type_id == types.id)"></div>
<div class="event-data-empty"  v-else=""></div>
<div class="event-data-empty"  v-if="!date.activities || date.activities.length == 0"></div>

Может всё-таки стоит ограничиться одним div'ом, выкинуть v-if, а класс вешать по условию? Как-нибудь так:

<div :class="date.activities && date.activities.length > 0 && date.activities.some(n => n.type_id == types.id) ? 'event-data' : 'event-data-empty'"></div>

[Gregory]

0xD34F, последнее решение работает! Очень вам благодарен! Спасибо!

[Gregory]

0xD34F, добрый день, можно у вас попросить маленькое дополнение к выше написанному?
Мне необходимо на div с классом event-data повесить событие которое в стор будет передавать объект дня с событием совпадающего типа. Ну т.е. Вы написали функцию, где мы вешаем класс если совпадает тип события:

<div :class="date.activities && date.activities.length > 0 && date.activities.some(n => n.type_id == types.id) ? 'event-data' : 'event-data-empty'"></div>

Я исходя из этого попытался немного переделать сделал так:

<div v-for="date in dayList">
   <div class="one-item" v-for="types in activityTypes">
				<div @click='sendEvent(date.filter(type => {return type.activities.some(n => n.type_id == types.id)}))'  
            class="event-data" 
            v-if="date.activities && date.activities.length > 0 && date.activities.some(n => n.type_id == types.id)">
		    </div>
				<div class="event-data-empty" v-else=""></div>
	</div>
</div

В общем я хочу в метод sendEvent передать отфиьтрованный объект date, который будет содержать в себе не все date.activities[i] а только те, которые удовлетворяют условию что type.id == types.id

Можете меня поправить?
Заранее спасибо.

[0xD34F]

Gregory, то есть, вам нужен весь объект, но чтобы одно из его свойств, являющееся массивом, было отфильтровано по какому-либо условию?

Object.assign({}, date, { activities: date.activities.filter(n => n.type_id == types.id) })

Копируем исходный объект в пустой (чтобы не испортить исходный), затем затираем исходные activities отфильтрованными. Наверное, так.

[Gregory]

0xD34F, да, именно так. Все работает, еще раз спасибо.