How to pass a value to v-model?

Question

I have a form that adds new products to a database. The category, I want to have pre filled in the form. I use :value to bind the category but the form requires v-model to send the form data.

I know the use of v-model overwrites the use of :value.

So instead of this code:

<b-form-input v-model="productCategory" :value="category.name />

I am looking for a way that would pass on the category.name from the v-for object to the productCategory property on submit of the form.

I found this answer: Pass value of input to v-model but I still have trouble coming to a solution.

Can someone please help.

EDIT based on the answer by @caseyjoneal I have edited my question to provide more insight in the code.

Defined properties:

  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 loop that loads a tab for every category from the db. Every tab has a modal inside which loads a form to add a product to the db. Since there is a tab for every category and a modal in every category I wanted to category field to be pre filled.

I have tried the suggestion from @caseyjoneal but I did not gave the wished result. No category was stored to the db.

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

So I am looking for a solution to achieve the equivalent of:

<b-form-input id="nestedCategory" v-model="productCategory" :value="category.name readonly/>

score 2 · Accepted Answer · answered Mar 03 '19 at 18:42

2

To use v-model you have to put it on the actual input element. It won't work on the component. It's hard to say what the best solution is for you without seeing how you have your data organized in your app. I would use bracket notation to add value to your productCategory object while in the v-for loop.

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

Check out this fiddle https://jsfiddle.net/caseyjoneal/vquc04mr/53/

answered Mar 03 '19 at 18:42

caseyjoneal

208
1
5

Thank you @caseyjoneal. I have tried your suggestion but without luck. No category was stored to the database. I have copied your approach I used in the code in my answer. – timmy Mar 03 '19 at 19:29
`productCategory` needs to be an object with category attributes for my solution to work just like in the fiddle I included below my answer above. Once you have done that you'll have to include the `v-model="productCategory[category]"` to dynamically set the value of your `productCaregory` object. – caseyjoneal Mar 03 '19 at 20:57

How to pass a value to v-model?

1 Answers1