How to preselect for select element

[etanxing]

How to set selected attr to <option> element whose value is equal to item.category? Especially when item.category is changed.

<select class="form-control" name="template" v-model="item.category">
            <option v-repeat="templates" value="{{name}}">{{name}}</option>
</select>

[yyx990803]

<select class="form-control" name="template" v-model="item.category">
    <option v-repeat="templates"
        selected="{{name == item.category}}"
        value="{{name}}">
        {{name}}
    </option>
</select>

[etanxing]

Thanks, but it doesn't work for 1st time. http://jsfiddle.net/tyb22/

[remoe]

@etanxing, when you look at your HTML after the initialization (with DevTools), then you see that the "selected" value is correctly set. So it is not an Vue issue?! (Chrome 35.x Windows)

[asip]

@etanxing Is it Google Chrome's issue? it works for 1st time at Firefox or Safari but it doesn't work for !st time at Google Chrome.

[yyx990803]

There seems to be quite some inconsistency in Browser behaviors regarding form input elements. I will try to resolve this with a more consistent implementation in the next version.

[etanxing]

@remoe I'm not sure either
@asip it's Chrome stable Windows & Mac
@yyx990803 Thanks!

[yyx990803]

Closing. Further discussion can be done in #321.

[cyrilchapon]

That doesn't answer the question. The question is not "how to bind a model to a select". The question is "how to preselect select element" which is pretty different.

I personaly need both v-on:change behavior and preselect, without binding to my model property (I need to one-way databind, once)

[LinusBorg]

Please don't comment on closed issues from 2.5 years ago.

Ask questions on forum.vuejs.org, or open a new issue if you found a bug.

Thanks!

[cezar62882]

http://jsfiddle.net/tyb22/25/

[nickmessing]

@cezar62882, you know this was close Jun 21, 2014?

[ergonomicus]

@nickmessing , you know @cezar62882 actually helped me July 7, 2017?

[nickmessing]

@ergonomicus, initial issue was about Vue 1, now it's Vue 2, can you please tell what browsers behave wrong when using simple :selected="name == item.category" as opposite to ternary as in @cezar62882's example?