Как вывести конкретные элементы массива через v-for

Question

Как мне вывести элементы массива на страницу только с 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: [],
      };
    }, 
}

Answer 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>

БЛОГ НА HUSL

Как вывести конкретные элементы массива через v-for

Ответы (1 шт):