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

问题描述

我正在一个项目，该项目的后端具有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",null: false

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

解决方法

没有内置的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>