Как отобразить только определенные элементы из массива в цикле v-for во Vue JS?

Question

[postya]

Имеется блок, в котором я отображаю множества блоков. Эти блоки создаются через v-for.
Мне нужно,чтобы появились все блоки из массива, но отобразились названия только определенных элементов из массива:
1, 2, 3, 4, 5, 6 ,7 , 8 ,9 ,10.
Все остальные блоки должны отобразиться, но значения их элементов должно быть пустым
Как это можно сделать?
Я так понимаю надо какой-то фильтр применить для отображения?

<div
        class="chars square" v-for="square in squares" :key="square">{{square}}
      </div>

script:

squares: [
          '1', 'a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1', 'i1', 'j1',
          '2', 'a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2', 'i2', 'j2',
          '3', 'a3', 'b3', 'c3', 'd3', 'e3', 'f3', 'g3', 'h3', 'i3', 'j3',
          '4', 'a4', 'b4', 'c4', 'd4', 'e4', 'f4', 'g4', 'h4', 'i4', 'j4',
          '5', 'a5', 'b5', 'c5', 'd5', 'e5', 'f5', 'g5', 'h5', 'i5', 'j5',
          '6', 'a6', 'b6', 'c6', 'd6', 'e6', 'f6', 'g6', 'h6', 'i6', 'j6',
          '7', 'a7', 'b7', 'c7', 'd7', 'e7', 'f7', 'g7', 'h7', 'i7', 'j7',
          '8', 'a8', 'b8', 'c8', 'd8', 'e8', 'f8', 'g8', 'h8', 'i8', 'j8',
          '9', 'a9', 'b9', 'c9', 'd9', 'e9', 'f9', 'g9', 'h9', 'i9', 'j9',
          '10', 'a10', 'b10', 'c10', 'd10', 'e10', 'f10', 'g10', 'h10', 'i10', 'j10',

        ]

Answer 1

[0xD34F]

Я так понимаю надо какой-то фильтр применить для отображения?

Можно и фильтр:

filters: {
  numberOnly: val => /^\d+$/.test(val) ? val : '',
},

<div v-for="n in squares">
  {{ n | numberOnly }}
</div>

Но не обязательно:

<div v-for="n in squares">
  {{ Number.isNaN(+n) ? '' : n }}
</div>

Если знаете, в каких местах находятся нужные элементы, то

<div v-for="(n, i) in squares">
  {{ i % 11 ? '' : n }}
</div>

Или, если знаете сами элементы:

data: () => ({
  itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
  ...
}),

<div v-for="n in squares">
  {{ itemsToShow.includes(n) ? n : '' }}
</div>

Comments

[postya]

Благодарю! вариант с filters мне помог

Answer 2

[Alex]

Если нужно отобразить контейнер, но без названия

<div
        class="chars square" v-for="square in squares" :key="square">{{ %conditional% ? square : ''}}
      </div>

Comments

[postya]

что означает conditional? Эту переменную где-то нужно прописывать?

[Alex]

postya, Какое-то условие

[postya]

Alex, а как можно задать условие для определенных эелементов из массива? получается мне нужно сделать условие для элементов : 1 ,2 ,3 ,4 ,5, 6 ,7 ,8 ,9, 10