问题描述
我有一个将新产品添加到数据库的表单。
我要预先填写该类别。
我使用:value绑定类别，但是表单需要v-model来发送表单数据。
我知道v模型的使用会覆盖:value的使用。
因此，代替此代码：
<b-form-input v-model="productCategory" :value="category.name />
我要寻找的是会转嫁的方式category.name从v-for对象的productCategory的形式提交的财产。
我找到了这个答案： 但是我仍然难以解决。
有人可以帮忙吗？
基于由@caseyjoneal我已经编辑我的问题，提供的代码更深入的答案编辑 。
定义的属性：
data() {
return {
products: [],
categories: [],
category: null,
name: null,
price: null,
productCategory: null,
productImage: null,
imageUrl: null,
description: null,
selected: "9",
btwOptions: [
{ value: "9", text: "9% BTW" },
{ value: "21", text: "21% BTW" }
]
}
}
V-for循环为数据库中的每个类别加载一个选项卡。 每个选项卡内部都有一个模式，该模式可加载一个表单以将产品添加到数据库中。 由于每个类别都有一个选项卡，每个类别中都有一个模式，因此我想对类别字段进行预填充。
我已经尝试过@caseyjoneal的建议，但没有给出希望的结果。 没有类别存储到数据库。
<b-tab v-for="category in categories" v-bind:title="category.name" :key="category.id">
<b-modal>
<form>
<b-form-group label-cols-sm="3" label="Categorie:" label-align-sm="right" label-for="nestedCategory">
<div hidden>{{category.name}}:{{productCategory[category]}}</div>
<b-form-input id="nestedCategory" :placeholder="category" v-model="productCategory" readonly/>
</b-form-group>
</form>
</b-modal>
</b-tab>
因此，我正在寻找一种解决方案，以实现以下目标：
<b-form-input id="nestedCategory" v-model="productCategory" :value="category.name readonly/>
1楼
caseyjoneal
2
已采纳
2019-03-03 18:42:18
要使用v-model您必须将其放在实际的输入元素上。
它不适用于该组件。
在不了解如何在应用程序中组织数据的情况下，很难说出最适合您的解决方案。
在v-for循环中，我将使用方括号符号为productCategory对象添加值。
<div
v-for="(_, category) in productCategory"
:key="category"
>
{{ category }}: {{productCategory[category] }}
<input
:placeholder="category"
v-model="productCategory[category]"
>
</div>
看看这个小提琴