当输入字段的数量不恒定时，Vue.js如何从输入字段中收集值答案

【问题标题】：Vue.js how to collect values from input fields when the number of input fields aren't constant当输入字段的数量不恒定时，Vue.js如何从输入字段中收集值
【发布时间】：2018-05-31 12:25:53
【问题描述】：

我的用例

我从后端 API 获得了一个数组，其中包含输入字段名称。
我将这些名称与输入字段一起呈现。

这是我的代码。

<template>
    <div class="itemGenerate">
        <div>

            <ul>
                <li v-for="identifier in identifiers" :key="identifier">
                <input type="text" value=""/>{{identifier.name}}
                </li>
            </ul>

            <button type="button">Add</button>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      identifiers: [{ name: "Flavour" }, { name: "Size" }, { name: "Color" }]
    };
  }
};

我的问题是

这些输入字段不是恒定的。它会在每个 API 调用中发生变化（有时它只是颜色，有时是颜色、大小和另一个新事物）。

如果我知道输入字段的数量，我会使用v-model，但我不能在这里使用，因为它没有预定义。

如何使用 vue.js 实现这一点？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

试试这个

<template>
    <div class="itemGenerate">
        <div>

            <ul>
                <li v-for="identifier in identifiers" :key="identifier">
                <input type="text" v-model="item[identifier.name]"/>{{identifier.name}}
                </li>
            </ul>

            <button type="button">Add</button>
        </div>

    </div>
</template>

<script>
export default {
  data() {
    return {
      item:{},
      identifiers: [{ name: "Flavour" }, { name: "Size" }, { name: "Color" }]
    };
  }
};

【讨论】：