Question

我有一个将新产品添加到数据库的表单。我要预先填写该类别。我使用ln来绑定类别，但是表单需要:value来发送表单数据。

我知道v模型的使用会覆盖v-model的使用。

所以代替此代码：

:value

我正在寻找一种方法，可以在提交表单时将<b-form-input v-model="productCategory" :value="category.name />对象从category.name对象传递到v-for属性。

我找到了这个答案：Pass value of input to v-model，但是我仍然很难解决问题。

有人可以帮忙吗？

编辑根据@caseyjoneal的回答，我已经编辑了我的问题，以便在代码中提供更多见识。

定义的属性：

productCategory

V-for循环为数据库中的每个类别加载一个选项卡。每个选项卡内部都有一个模式，该模式可加载一个表单以将产品添加到数据库中。由于每个类别都有一个标签，每个类别都有一个模式，因此我想对类别字段进行预先填写。

我尝试了@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" }
      ]
    }
  }

所以我正在寻找一种解决方案，以达到以下效果：

<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>

Answer 1

要使用v-model，必须将其放在实际的输入元素上。它不适用于该组件。在不了解如何在应用程序中组织数据的情况下，很难说出最适合您的解决方案。在productCategory循环中，我将使用方括号符号为您的v-for对象添加值。

<div
  v-for="(_, category) in productCategory"
  :key="category"
>  
  {{ category }}: {{productCategory[category] }}
  <input 
    :placeholder="category"
    v-model="productCategory[category]"
  >
</div>

查看这个小提琴https://jsfiddle.net/caseyjoneal/vquc04mr/53/

如何将值传递给v模型？

1 个答案: