Vue: Support object values in `v-model` for <select>

[jackmcdade]

When using the {text:'', value:''} format for dynamic <select> options it becomes complex to get the text back out again for display since the v-model binds the value. One must then run a computed property and filter the options again and... you get the point.

Would it be possible to to support a syntax like this?

options: [
  {this: 'This One'},
  {that: 'That One'}
]

Which would then let us get that value back out like this.options[this.selected]. Just an idea. Feel free to say nay.

[JosephSilber]

A better option might be to allow the option's value to be an actual object, like Angular does.

[jackmcdade]

Yeah that would definitely work too.

[Rastishka]

This would be cool!

[J-F-Liu]

Installed latest code in dev branch, but it still doesn't work.
As I debug the code, I find that inside function buildOptions of select.js
After execute line 144 el.value = op.value, el.value is "[object Object]", a string value.

[yyx990803]

@J-F-Liu of course el.value will be serialized. The object value only works when syncing back to model.

[J-F-Liu]

The example code in #1183 still doesn't work, can you have a try?

[simplesmiler]

@J-F-Liu did you build?

The dist folder contains the standalone build for Vue.js, however files here are only checked-in when a release happens. If you are on the dev branch, files here are NOT up to date.

[J-F-Liu]

@simplesmiler No, I installed with bower install yyx990803/vue#dev, after clone the repo and run build task the code works now, thanks.

[appsparkler]

@yyx990803

As I needed objects in my selected value, i worked with JavaScript's JSON methods

#STRINGIFY the input with JSON.stringify(myObject)

<select @change="statusSelected">
  <option v-for="orderStatus in orderStatusList", :value="JSON.stringify(orderStatus)"> {{ orderStatus.status }}</option>
</select>

#PARSE it with JSON.parse(myObjectString)

...
methods: {
  statusSelected (evt) {
    console.log(JSON.parse(evt.target.value))
  }
}
...

[doublemarked]

@app-sparkler afaik serialization like that is not necessary (at least not in 2017). In the docs they show the following example:

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

From here: https://vuejs.org/v2/guide/forms.html#Select-Options

[ndabAP]

It seems like the support for objects as values is dropped again.

[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Boolean, Number, Array, got Object.

[appsparkler]

@ndabAP

It does work...

<template id="my-temp">
    <div>
        <h1>{{myProps.foo}}</h1>
    </div>
</template>

+

Vue.component('myComp', {
    template:'#my-temp',
    props: ['myProps'],
})

+

<my-comp my-props="{foo: 'bar'}" ></my-comp>

gives the output of :

<h1>bar</h1>

screenshot:

Good Luck...

[zealotrahl]

So, still no sollution to this?

[appsparkler]

@zealotrahl please see my answer above your question.