I have standard v-for like so (using BootstrapVue):
<b-col v-for="(card, index) in cards"
:key="index"
cols="4">
<b-button> Click Me! </b-button>
</b-col>
and cards is a simple array of objects.
I have the need to dynamically add another b-col but only on some iterations of the v-for. I'd like to somehow add another b-col without modifying cards. I'm trying to avoid modifying cards b/c the rest of the codebase depends on the items in that array to be "real" items; not filler items just for the purposes of the UI.
The page contains a row of buttons, bound to cards, and every so often, one of the cards needs to have an additional 'Add' button injected into the UI. The new button must fit into the table's layout and fit in as if it were any other column.
I've tried different approaches to structuring the row of buttons (namely, an outer div with the v-for on it, containing a col with a b-button in it. Then I could add another col in the div for the 'Add' button, but that doesn't work out, layout-wise. The containing div wraps to the next line, taking the inner cols with it. I've tried adding display: inline-block; to the cols and that works only after the containing div wraps off it's original line. How can I keep the div on its line?
Or perhaps what I really need is a CSS way to wrap a div, starting from the middle of the line and wrapping to the next line, while the start of the div on the second line stays all the way to the left. A div shaped like a backward capital 'L'.
I'm open to other approaches that could achieve the same effect.
Do v-for on template and add extra b-col components where you need them:
// App.vue
<script lang="ts" setup>
import { ref } from 'vue';
import BCol from './BCol.vue';
const cards = [
{id: 0},
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
];
const addCards = {
1: 'foo',
3: 'bar'
}
const clickedId = ref();
</script>
<template>
{{clickedId}}
<template v-for="(card, index) in cards">
<BCol
v-if="addCards[index]"
:id="addCards[index]"
@click="clickedId = addCards[index]"
></BCol>
<BCol
:id="card.id"
@click="clickedId = card.id"
></BCol>
</template>
</template>
// BCol.vue
<script setup lang="ts">
defineProps<{
id: number | string
}>()
</script>
<template>
<div>
<button> Click Me! ({{id}})</button>
</div>
</template>