如何在 Vue.js 中使用多個 v-model 輸入？

Question

我有一個根據我通過請求收到的數據呈現的動態表單，它基本上返回給我：

meta = {
  fields: [
    {
      oid: 'name',
      label: 'Name',
      component: 'SingleLineField'
    },
    {
      oid: 'timeType',
      label: 'Time type',
      component: 'TimeTypeField'
    },
    {
      oid: 'icon',
      label: 'Project Symbol',
      component: 'IconSelectField'
    },
    {
      oid: 'name',
      label: 'Name',
      component: 'SingleLineField'
    },
  ],

在這里，我渲染表單中收到的每個組件：

<template>
  <div>
    <component
      v-for="field in meta.fields"
      :key="`${field.oid}-field-component`"
      :is="field.component"
      :name="field.oid"
      :oid="field.oid"
    />
  </div>
</template>

問題是因為它們是通過后端的動態值和可以重復的值，因為一個字段可以來多次，我不知道如何為它們每個創建一個動態的v-model . 如果有人可以幫助我，我將不勝感激。

Answer 1

數組呢？

<template>
  <div>
    <component
      v-for="(field, i) in meta.fields"
      :key="`${field.oid}-field-component`"
      :is="field.component"
      :name="field.oid"
      :oid="field.oid"
      :v-model="values[i]"
    />
  </div>
</template>

並將values聲明為數據中的數組...

data: function() {
  return {
    values: []
  }
}