CODEWITHSUNDEEP
html-selectvue.js
magenta placenta
magenta placenta

Reputation: 1535

Vue 2.0.3 setting option value not working with :value="x" or v-bind:value="x"

https://jsfiddle.net/53jprgse/

I'm not able to get dynamic select option value attributes set using Vue 2.0.3 and :value or v-bind:value bindings. No option values are being set when I use these.

I have to add the static html value="" or value="some value" attribute to get option value attributes to render their dynamic values.

My data set is a simple array of strings.

This is illustrated by inspecting the select elements at the fiddle above.

Can someone tell me what I'm missing here? Seems like this should be very straight forward.

Upvotes: 2

Views: 950

Answers (1)

tam5
tam5

Reputation: 3237

If you want the DOM to actually have the value attribute set by v-bind you have to actually add the value attribute (doesn't matter what it says).

So, in your first 2 selects you basically had this:

<div>
  <p>
    :value="county"
  </p>
  <select v-model="filterByCounty">
    <option value="">Filter by county...</option>
    <option v-for="county in counties" :value="county">
      {{ county }}
    </option>
  </select>
  {{ selected_county }}
</div>

If you just add a value to the <option> it will work as you'd like:

<option v-for="county in counties" :value="county" value="">

Upvotes: 1

Related Questions