在 v-for 循环中并排显示动态生成的表单

Question

我根据 json 文件生成动态表单。但是它们会像这样相互显示：

但它应该像这样显示（例如，这是 3 个输入，如果我有 4 个，第四个应该在第三个旁边，依此类推。）

<div v-for="(item, index) in json" :key="index">
  <b-form-input v-if="item.type" :type="item.type"></b-form-input>
</div>

我的对象：

[
    {
        "key": "key1",
        "label": "Input Type Text",
        "type": "text",
        "value": ""
    },
    {
        "key": "key2",
        "label": "Input Type Number",
        "type": "number",
        "value": ""
    },
    {
        "key": "key3",
        "label": "Input Type Number",
        "type": "number",
        "value": ""
    }
]

我已经尝试用 class="row" 来解决它，但它不起作用，因为它们彼此之间仍然是一样的..

Answer 1

从标签我可以看出你正在使用 bootstrap

在 bootstrap 中，您可以使用 row 和 col 将项目并排对齐。

<div class="row">
  <div v-for="(item, index) in json" :key="index" class="col-6">
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

Answer 2

is it possible that it should only "col-6" my input fields. I have also some selectoin and checkboxes... these I want to have "col-12"

根据具体情况，我会采用两种方法

首先，如果您可以编辑输入对象并希望在类中获得更多自由，您可以这样做：

方法一

编辑您的对象以包含类

[
    {
        "key": "key1",
        "label": "Input Type Text",
        "type": "text",
        "value": "",
        "classes": "col-6"
    },
    {
        "key": "key2",
        "label": "Input Type Number",
        "type": "number",
        "value": "",
        "classes": "col-6"
    },
    {
        "key": "key3",
        "label": "Input Type Number",
        "type": "number",
        "value": "",
        "classes": "col-6 another-class"
    }
]

然后在 html

中使用类

<div class="row">
  <div
    v-for="(item, index) in json"
    :key="index"
    :class="item.classes"
   >
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

方法二

根据输入类型

分配条件类

<div class="row">
  <div
    v-for="(item, index) in json"
    :key="index"
    :class="{
      'col-6': item.type === 'number' || item.type === 'text' || item.type === 'email',
      'col-12': item.type === 'select' || item.type === 'checkbox',
    }"
   >
    <b-form-input v-if="item.type" :type="item.type"></b-form-input>
  </div>
</div>

答案基于 s4k1b's

在 v-for 循环中并排显示动态生成的表单

Display dynamically generated forms next to each other in v-for loop

javascript

vue.js

vuejs2

bootstrap-vue