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

Question

我的用例

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

这是我的代码。

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

Answer 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" }]
    };
  }
};