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

Question

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

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

我有一个属性 participants，它是一个包含 name 和 email 的嵌套数组 (json)。一直在努力寻找一种方法让我的 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

没有 built-in 自动显示对象的 Vuetify 表单字段。在这种情况下，您必须将每个对象属性显式绑定到表单 field/label.

例如，假设 participants 是这个对象：

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

您可以使用 Vue 的 string interpolation for participants.label and 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>

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

Passing json attribute on vue form field

forms

json

rails-api

vue.js

vuetify.js