Vue: компоненты, добавленные с помощью "v-for", игнорируют макет flexbox.

Question

Я пытаюсь отобразить элементы навигации по горизонтали в верхнем правом углу экрана. Следующее работает и отображается с каждым элементом в строке:

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

<style>
    #navControlPanel{
        display: flex;
        flex-direction: row;
        width: 100px;
        height: 50px;
        background: purple;
    }

    #controls{
        display: flex;
        flex-direction: row;
        width: 100%;
    }
</style>

, но это не так, а вместо этого отображается с ними в столбце:

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

NavControl:

<template>
    <div id="navControl">
        {{control.id}} //Set to just plain text when not dynamically binded
    </div>
</template>

<style scoped>
    #navControl{
        width: 30pt;
        height: 30pt;
        background: blue;
        border-radius: 1000px;
    }
</style>

Я не могу найти логической причины, по которой они будут другими, если только это не какой-то неотъемлемый способ Vue работы, который мне не хватает.

Answer 1

Проблема здесь, похоже, в том, что в первом примере у вас есть один div с несколькими компонентами в нем:

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

Проблема в том, что во втором примере вы создаете несколько div элементы с одинаковым идентификатором, и каждый из них имеет вложенный компонент внутри.

Здесь, в al oop, вы создаете несколько элементов div с id="controls"

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

В итоге получается что-то вроде этого:

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

Вероятно, вы бы увидели это лучше, если бы проверили свой код в инструментах браузера.

В качестве примечания: пожалуйста, имейте в виду, что если вы по какой-то причине захотите сделать что-то подобное, вы должны использовать class вместо id.

Решение:

Вместо этого вы хотели бы создать несколько компонентов внутри вашего <div id="controls"></div>.

Для этого вы должны поместить v-for внутри компонента, а не внешний div.

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

Answer 2

• 1000 :

<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 */
}

Если v-for выходит за рамки, и мы хотим, чтобы это выполнялось только для этих элементов на NavControl:

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