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

Question

我的用例

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

这是我的代码。

v-model

我的问题是

这些输入字段不是常量。它会在每个API调用中发生变化（有时它只是颜色，有时颜色，大小和另一个新东西）。

如果我知道输入字段的数量，我会使用<?php $val = 'apple'; echo json_encode($val); ?>，但我不能在这里使用，因为它没有预定义。

如何使用vue.js实现此目的？

提前致谢。

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