+1 vote
by
There is a block in which I am displaying multiple blocks. These blocks are created via v-for.
I need all the blocks in the array to appear, but only the names of certain elements in the array are displayed:
1, 2, 3, 4, 5, 6 ,7 , 8 ,9 ,10.
All other blocks should be displayed, but the values of their elements should be empty
How can this be done?
I guess you have to apply some kind of filter to display?

<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',

]

1 Answer

0 votes
by
 
Best answer
I guess you have to apply some kind of filter to display?

You can have a filter, too:

filters: {
numberOnly: val => /^\d+$/.test(val) ? val : '',
},
<div v-for="n in squares">
{{ n | numberOnly }}
</div>
But not necessarily:
<div v-for="n in squares">
{{ Number.isNaN(+n) ? '' : n }}
</div>
If you know where the necessary elements are located, then
<div v-for="(n, i) in squares">
{{ i % 11 ? '' : n }}
</div>
Or, if you know the elements themselves:
data: () => ({
itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
...
}),
<div v-for="n in squares">
{{ itemsToShow.includes(n) ? n : '' }}
</div>
...