How to prevent certain elements from being displayed through VUE if the “no” field is checked in bitrix?

Question

css

There is an output of elements that outputs ALL elements:

<div class="apartment-search-results" v-if="showedItems.length">
                    <div class="apartment-search-result" v-for="(item, index) in showedItems" :key="`apart_${item.id}`">
                        <div class="apartment-search-result__caption"><span>{{ item.roomsCount }}</span><span>{{ getWordByNumber(item.roomsCount, ['комната', 'комнаты', 'комнат']) }}</span>
                        </div>
                        <div class="apartment-search-result__image"><img :src="item.image"
                                                                         :alt="`${item.roomsCount} комнаты`"></div>
                        <div class="apartment-search-result__params"><span>Общая площадь</span><span class="big-text">{{ item.space }} м²</span>
                        </div>
                        <div class="apartment-search-result__params"><span>Цена за м²</span><span class="big">{{ item.costPerMeter }} ₽</span>
                        </div>
                        <hr class="block-break">
                        <div class="apartment-search-result__price">{{ item.fullCost }} ₽</div>
                        <a class="button button--expanded button--font-bold button--style-orange" :href="item.url">Узнать
                            подробнее</a>
                    </div>
                </div>

How to make it so that if in Bitrix (for example, I create a custom field with the parameters Sold - "yes" / "no") the value is "no", then vue will not display these elements?
What is the best way to do this? via vue or pure php?

Answer 1

Head-on option: https://codepen.io/anon/pen/VBdKZN

A circle as a div given an image as background-image.

If there is no content inside, and its task is exclusively graphic, then it is better to make it a pseudo-element.

Answer 2

margin-top: -[половина высоты круга]px
To make the image on the background take the circle forum:
border-radius: [половина высоты круга]px

Answer 3

You don't need to disable, you only need to output those elements that match the value in the field from the backend

<div class="apartment-search-result" v-for="(item, index) in showedItems" :key="`apart_${item.id}`">
<p v-if="item.sold === 'yes'"> Показывает толкьо проданные</p>
</div>

it's not necessary to write
:key="`apart_${item.id}`"
like this
:key="item.id"