current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

What is the correct way to bind a select element to an object (rather than a string value) but still have the HTML element submit a string value?

I've managed to get this working, but it almost seems like I'm exploiting a bug:

<select v-model="selected" v-on:change="price=selected.price">
    <option v-for="item in items" v-bind:value="item" value="{{ item.id }}">{{ item.name }}</option>
</select>

This works as intended: the "selected" property is attached to the "item" object, but the form POSTs just the item's ID. However, if I reverse the order of the HTML attributes, so that value={{ item.id }} comes before v-bind:value="item", then the form POSTs "[Object]" rather than, e.g., "3".

The fact that it's so fragile makes me think I'm doing something wrong.

So what's the right way to handle this?

share|improve this question
up vote 0 down vote

I see in both the cases, HTML being rendered as following:

<select>
  <option value="[object Object]">name1</option>
  <option value="[object Object]">name2</option>
  <option value="[object Object]">name3</option>
  <option value="[object Object]">name4</option>
</select>

Case 1 : v-bind:value="item" value="{{ item.id }}" : fiddle

Case 2 : value="{{ item.id }}" v-bind:value="item" : fiddle

So both the cases are equivalent as far as HTML being rendered. Ideal way to do it without confusion will be just using v-bind:value="item" like following: 

<select v-model="selected" v-on:change="price=selected.price">
    <option v-for="item in items" v-bind:value="item">{{ item.name }}</option>
</select>

You should v-bind to item or item.id depending on what you want to assign to selected variable.

share|improve this answer
    
Thanks, but neither of those works. If I v-bind to item then the value submitted by the form is the string "[object Object]". If I v-bind to item.id, then that problem is fixed, but the selected model is just the id, not the whole item, which I need it to be. – adamthehutt Dec 25 '16 at 0:36
    
Why do you want to have selected to be whole model: selected will be whatever you use v-bind in <option>. I see selected as whole item in http://jsfiddle.net/sh9kd1gg/2/. – Saurabh Dec 25 '16 at 6:17
    
I need selected to be the whole model because I need to reference the "price" property of the model (item.price). In the fiddle you posted, that works (more or less) but then we're back to the original problem. When that form is posted, the value of that select field will be "[object Object]". I need it to be the item.id. – adamthehutt Dec 27 '16 at 16:38
    
@adamthehutt check this fiddle: jsfiddle.net/sh9kd1gg/3, If this not works, Can you update this fiddle with your issue. – Saurabh Dec 27 '16 at 17:10
    
Yes, that works, but it requires that you intercept the form submission in javascript (to capture selected.id and overwrite the value of that form field). I was hoping to be able to do a normal HTML form submission. But I guess that's not possible. Thanks anyway for your help. – adamthehutt Dec 28 '16 at 17:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.