Vue：通过“v-for”添加的组件忽略 flexbox 布局答案

【问题标题】：Vue: Components added through "v-for" ignore flexbox layoutVue：通过“v-for”添加的组件忽略 flexbox 布局
【发布时间】：2020-10-09 04:00:43
【问题描述】：

我正在尝试在屏幕的右上角水平显示导航控件。下面的工作和显示在一行中的每个项目：

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

导航控制：

<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 工作的某种固有方式。

【问题讨论】：

标签： javascript html css vue.js flexbox

【解决方案1】：

这里的问题似乎是，在第一个示例中，您有一个 div，其中包含多个组件：

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

问题在于，在第二个示例中，您创建了多个具有相同 id 的 div 元素，并且每个元素内部都有嵌套组件。

在这里，在一个循环中，您使用id="controls" 创建多个div 元素

<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"/>

【讨论】：

【解决方案2】：

我不确定实际所需的范围，所以我将两者都介绍一遍。

如果我们希望模板中有多个controls，按照布局，将id="controls" 切换为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 */
}

如果v-for 超出范围，我们只希望在NavControl 上的这些项目上运行：

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

【讨论】：