2

Как мне вывести элементы массива на страницу только с parentId:null?

<template>
    <div id="app" >
      
      <HelloWorld
        v-for="card in cards" 
        :key="card.id"
        :msg="card.name"
        :selected="isSelected(card)"
        @click="addCards(card)"
      />
      <p>Выбраны карточки: {{ selected }}</p>
    </div>
  </template>
 export default {
    name: "App",
    components: {
      HelloWorld,
    },
    data() {
      
      return {
        cards: [
          {name: 'Сфера медицины', id: 1, parentId: null},
          {name: 'Сфера it', id: 2, parentId: null},
          {name: 'Сфера искусства', id: 3, parentId: null},
          {name: 'Сфера стомата', id: 4, parentId: 1},
          {name: 'Сфера акушера', id: 5, parentId: 1},
          {name: 'Сфера хирурга', id: 6, parentId: 1},
          {name: 'Сфера пломбы', id: 7, parentId: 4},
          {name: 'Сфера наркоза', id: 8, parentId: 4},
          {name: 'Сфера брекетов', id: 9, parentId: 4},
        ],
        
        selected: [],
      };
    }, 
}
1

1 ответ 1

1

Предлагаю использовать вычисляемые свойства computed, где и производить фильтрацию

var app = new Vue({
  el: '#app',
  data() {
    return {
      cards: [
        {name: 'Сфера медицины', id: 1, parentId: null},
        {name: 'Сфера it', id: 2, parentId: null},
        {name: 'Сфера искусства', id: 3, parentId: null},
        {name: 'Сфера стомата', id: 4, parentId: 1},
        {name: 'Сфера акушера', id: 5, parentId: 1},
        {name: 'Сфера хирурга', id: 6, parentId: 1},
        {name: 'Сфера пломбы', id: 7, parentId: 4},
        {name: 'Сфера наркоза', id: 8, parentId: 4},
        {name: 'Сфера брекетов', id: 9, parentId: 4},
      ],

      selected: [],
    };
  },

  computed: {
    getCardsNoParentId() {
      return this.cards.filter(card => !card.parentId && card.parentId !== 0)
    },
  },

})
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="app">

  <div v-for="card in getCardsNoParentId" :key="card.id">
    {{card.name}}
  </div>

</div>

Или просто воспользуйтесь v-if

<div id="app">
  <HelloWorld
    v-for="card in cards" 
    :key="card.id"
    v-if="!card.parentId && card.parentId !== 0"
    :msg="card.name"
    :selected="isSelected(card)"
    @click="addCards(card)"
  />
  <p>Выбраны карточки: {{ selected }}</p>
</div>
3
  • Сильно не рекомендуется использовать v-for вместе в v-if. Я знал о такой возможности, но Vue не дает мне этого сделать. Commented 21 дек. 2022 в 4:37
  • Тогда предлагаю использовать вычисляемые свойства computed, они имеют отличную особенность кеширование Commented 21 дек. 2022 в 20:10
  • Лучший вариант с computed. v-for + v-if - это очень плохая практика
    – Oleksandr
    Commented 25 дек. 2022 в 17:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.