Vue.js如何在输入字段数量不为'；t常数

我的用例

我从后端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" }]
    };
  }
};

标识符中的标识符：key=“identifier”>
{{identifier.name}


添加
导出默认值{
数据（）{
返回{
标识符：[{name:“flavor”}，{name:“Size”}，{name:“Color”}]
};
}
};

我的问题是

这些输入字段不是常量。它会在每次API调用中改变（有时只是颜色，有时是颜色、大小和其他新事物）

如果我知道输入字段的数量，我会使用

v-model

，但我不能在这里使用，因为它不是预定义的

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

试试这个

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

标识符中的标识符：key=“identifier”>
{{identifier.name}


添加
导出默认值{
数据（）{
返回{
项目：{}，
标识符：[{name:“flavor”}，{name:“Size”}，{name:“Color”}]
};
}
};