[Vuejs]-Vue: Components added through "v-for" ignore flexbox layout

by

4👍

✅

The issue here seems to be that in the first example you got one div with multiple components in it:

<div id="controls">
   <NavControl />
   <NavControl />
   <NavControl />
</div>

The problem is that in the second example you are creating multiple div elements with the same id and each of them have nested component inside of it.

Here, in a loop, you create multiple div elements with id="controls"

<div id="controls" v-bind:key="control.id" v-for="control in controls">
      <NavControl v-bind:control="control" />
</div>

It ends up being something similar to this:

<div id="controls">
   <NavControl />
</div>
<div id="controls">
   <NavControl />
</div>
<div id="controls">
   <NavControl />
</div>

You would probably see it better if you inspected your code in the browser tools.

As a side note: please, keep in mind that if you for whatever reason wanted to do something like this then you would use class instead of id.

Solution:

What you would want to do instead is to create multiple components inside your <div id="controls"></div>.

To do that you would place v-for inside the component and not the outer div.

<NavControl v-for="control in controls" v-bind:control="control" :key="control.id"/>
👤Jakub A Suplicki

0👍

I am unsure of the actual desired scope, so I will go over both.

If we want multiple controls in the template, as laid out, switch id="controls" to class="controls":

<template>
    <div id="navControlPanel">
        <div class="controls" v-bind:key="control.id" v-for="control in controls">
            <NavControl v-bind:control="control" />
        </div>
    </div>
</template>
...
.controls {
  /* my styles */
}

If the v-for is out of scope, and we only want this ran on those items on NavControl:

<template>
    <div id="navControlPanel">
        <div class="controls">
            <NavControl
               v-for="control in controls"
            />
        </div>
    </div>
</template>
👤T.Woody

Leave a comment