Vue как вывести элементы с определенным параметром фильтра?

Question

[kimqar214521]

Есть вывод элементов:

<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="status">{{ item.status }}</div>
                        <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>

В блоке с классом status указано три значения элементу: Продано, В наличии, Забронировано. Статусы редактируются через админку битрикса.
Как сделать чтобы vue выводил элементы только со значениями "В наличии"?

Сама функция вывода элементов:

window.moduleAparts = new Vue({
        components: {numberInputComponent},
        el: '#moduleAparts',
        name: 'ApartsSearch',
        data() {
            return {
                minPrice: null,
                maxPrice: null,
                buildingNumber: 1,
                floorNumber: 1,
                buildingNumber2: 1,
                floorNumber2: 1,
                floorNumber_10: 1,
                show_floor: '9',
                roomsCount: [],
                loading: false,
                isSearched: false,
                items: [],
                showedItemsCount: addCount,
                isMoreControlsShowed: false,
                sortBy: 'PriceMinMax',
                keyword: '',
                sortOptions: [
                    { value: 'PriceMinMax', text: 'Сначала дешевле' },
                    { value: 'PriceMaxMin', text: 'Сначала дороже' },
                ],
            };
        },

Answer 1

[Александр]

Примерно так:

<div class="apartment-search-result" v-for="(item, index) in filtredItems" :key="`apart_${item.id}`">

data() {
  return {

    ...

    inStock: false,

    ...
    
  };
},

...

computed: {
  filtredItems() {
    if (this.inStock) {
      return this.items.filter(ite => item.status === 'inStock');
    }
  },
},

...