如何解决在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。