在 vue 表单字段上传递 json 属性

Question

我正在开发一个项目，该项目具有用于后端的 Rails API 和用于前端的 Vue(Vuetify)。有一种使用<v-form></v-form> 构建表单的好方法 标记，但我在我的表单中实现一个包含 JSON 字段的字段时遇到问题。我可以很容易地得到一个字符串：

<v-text-field
        v-model="host"
        label="Host"
        solo-inverted
/>

我有一个属性participants，它是一个嵌套数组（json），它采用name 和email。一直在尝试找到一种方法来让我的 vue 表单可以接受一个数组。

这是我的数据库架构：

create_table "shows", force: :cascade do |t|
    t.string "host", null: false
    t.string "location", null: false
    t.text "message"
    t.json "participants", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false

尝试在 v-form 上查找 JSON 对象的字段，但在官方文档中找不到任何内容。

Answer 1

没有自动显示对象的内置 Vuetify 表单字段。在这种情况下，您必须将每个对象属性显式绑定到表单字段/标签。

例如，将participants 视为这个对象：

{
  id: 'P1',
  label: 'Famous Mathematicians',
  names: [
    {
      first: 'Alan',
      last: 'Turing'
    },
    {
      first: 'Isaac',
      last: 'Newton'
    }
  ]
}

您可以使用 Vue 的 string interpolation 为 participants.label 和 v-for 映射 participants.names，如下所示：

<v-form>
  <h3>{{ participants.label }}</h3>
  <v-col v-for="name of participants.names">
    <v-text-field v-model="name.first" label="First name" />
    <v-text-field v-model="name.last" label="Last name" />
  </v-col>
</v-form>