ForEach внутри директивы v-if?

Question

[Gregory]

Можно ли как-то использовать метод .forEach внутри директивы v-if. Если да, не могли бы привести пример.

Answer 1

[Evgeny Kulakov]

Создайте лучше метод, который будет вызываться в v-if и туда передавайте что нужно для расчета

Answer 2

[Влад]

Попробуйте так, исходя из вашего примера

<div class="event" v-for="activity in date.activities" v-if="types.id == activity.type_id">
</div>

Comments

[Gregory]

Влад, ну почти... выходит коряво, что в местах где в общем массиве activities встречается несколько раз все съезжает...



там где 11 число 3-ка должна быть один раз рядом с другими тройками, ну а семерка должна так же попадать в верстку нормально.. код пока такой:

<div class="cal-header-m cal-title" v-for="types in activityTypes">
				<span>{{types.name}}</span>
			</div>
		</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 v-for="types in activityTypes">
				<div class="event-data" v-for="activity in date.activities" v-if="types.id == activity.type_id">{{types.id}}</div>
				<div class="event-data-empty" v-else=""></div>
				<div class="event-data-empty"  v-if="!date.activities"></div>
			</div>
		</div>

[Влад]

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

[Gregory]

Влад, смотрите если код рендерит часть, где date.activities имеет один объект, то все нормально.

А если, date. activities 3 объекта как это есть в ряду 11 числа, то код создает внутри каждого элемента one-item 3 элемента div:


у меня данные с сервера берутся в коде их нет вот скриныс vue dev tools , немного топорно, но это лучший вариант чтобы наглядно увидеть данные. А весь код который рендерит таблицу я выше показал
Это типы которые отрисовываются в левой колонке

Это массив дней с числами и событиями на определенный день вот у 11 числа 3 события есть

А это 9 число и там всего одно событие


В общем мне кажется из-за того что указано v-for="activity in date.activities" он и едет..

[Gregory]

Влад, ведь эта строка

<div class="event-data" v-for="activity in date.activities" v-if="types.id == activity.type_id">{{types.id}}</div>

говорит о том что если type id совпадет то создается элемент event-data вот и получается, что 11 числа он 2 раза совпадает на тройке один на семерке, где тройка элемент должен быть не 2 раза, а один, ну я думаю суть понятна, что я хочу в итоге получить, что там где есть события были клетки зеленые в остальном белые, но пока не получается условие правильно составить (((

[Влад]

Gregory, Вы правы, я не так Вас понял! Прошу прощения, в рамках вопроса ответ верный, а в рамках задачи сейчас придумаем :) и я заметил у вас в приведенном коде в начале два закрывающихся контейнера

[Влад]

Gregory, может добавить ещё одну проверку в v-if на совпадения дня?

[Gregory]

Влад, я щас с работы домой отправился, приду ещё голову поломаю. Если у Вас до этого времени родится решение буду премного благодарен.
Я думал может вместо создания элемента с классом если совпадает тип события, просто красить уже созданный элемент, в таком случае дубляжа клеток не будет, но это пока теория как реализовать не думал :)
Доеду попробую то что вы написали, отпишусь, правда судя по пробкам это будет после 9 (((

[Влад]

Gregory, Я тоже еду с работы и буду где - то в 9 дома :) Сообразим!

[Gregory]

Влад, хотя красить готовую клетку тоже плохое решение, тк там ещё нужно будет дописать функционал что при клике на клетку с событием открывается подробное описание с этим событием, а если просто расскрасить клетку данные о событии туда не передашь (

[Gregory]

Влад, договорились ) спасибо в любом случае за помощь ! :)

[Gregory]

Влад, так я дома :) А можно чуть подробнее про дополнительную проверку v-if?

[Влад]

Gregory, Я предполагаю, что условие должно складываться из двух частей: совпадает тип и совпадает день. Тогда оно точно одно будет. Есть идеи, нужно только добраться до дома:) Если что можно в ВК продолжить беседу, чтобы не засорять тостер) /result

[Gregory]

Влад, да давайте так и поступим. https://vk.com/gregory_kocharyan

Я предполагаю, что условие должно складываться из двух частей: совпадает тип и совпадает день. Тогда оно точно одно будет.

Мы, наверное, опять не правильно друг друга поняли, проверка на день уже есть, конкретно там где летит верстка это 11 число месяц ноябрь, на этот день в массиве есть 3 события два из них имеют type_id = 3, и 1 событие с type_id = 7 , и соответственно при рендренге 11 числа в столбце должно быть 2 зеленые клетки, напротив совпадающих типов событий, а когда на клетку кликаешь показывает какие события с таким типом были в этот день. Ну соответственно функционал кликания я сам реализую, просто пока никак не могу с рендерингом событий разобраться :) В общем добавляйтесь, как освободитесь.

Answer 3

[Илья Мясин]

В доке пишут:

When they exist on the same node, v-for has a higher priority than v-if. That means the v-if will be run on each iteration of the loop separately.

То есть выполняется цикл, и на каждом шаге - проверка. Чтобы об этом не думать, можно тупо не использовать эти директивы вместе, а писать явно. Для этого есть встроенный "прозрачный" тег template:

<template v-if="shouldShowAllTags()">
   <a v-for="tag in tags">{{tag}}</a>
</template>
...
<template v-for="tag in tags">
   <a v-if="shouldShowThisTag(tag)">{{tag}}</a>
</template>

Теперь:
1) мы можем добавить v-else, если понадобится
2) человек, не читавший доку по ссылке выше, поймет как оно работает "на глаз", без экспериментов :)

UPD: Перечитал комменты в соседнем ответе, вам оказывается надо другое =) Но все равно оставлю, в назидание будущим поколениям ))