Vue Selected Bind Does Not Work on Option Tags

[jbenner-radham]

Version

2.5.16

Reproduction link

https://codepen.io/jbenner/pen/geJqex

Steps to reproduce

1. Instantiate a Vue instance with a data property named locations which is an array consisting of ['all', 'north', 'south', 'east', 'west'].
2. Iterate over the locations in an option tag like so <option v-for="location in locations" :selected="location === 'all'">{{ location }}</option>.

What is expected?

The selected attribute to be set on the "all" option element.

What is actually happening?

The selected attribute is not being set.

---

I've also tried the following while attempting to debug but to no avail:

<option v-for="(location, index) in locations" :selected="index === 0">{{ location }}</option>

[posva]

selected is set as an element prop, not as an attribute because the attribute is only taken into account upon page loading, so setting the selected attribute would be worthless

[jbenner-radham]

I humbly ask that you reconsider this issue. You are 100% correct about selected only being taken into account upon page load. But if you are using pre-rendering or server-side rendering then the property will be present upon page load. Also, if you are using the standard client-side rendering implementation you can call document.forms.formId.reset() after the template render to have the browser honor the selected property.

Regardless, thank you for your hard work on an excellent product.

[posva]

It is indeed useful for SSR but I haven't checked if it's not added yet

[salazare]

See https://codepen.io/anon/pen/Overbe

[daveroberts]

I'm running into a similar issue on a select box where I can't use v-model. Is there a workaround or fix for this issue?

[tony19]

One workaround is to create a directive (named "attr") that sets the attribute:

Vue.directive('attr', (el, binding) => {
  // Boolean attributes take the empty string as a `true` value
  if (binding.value === true) binding.value = ''

  if (binding.value === '' || binding.value) {
    el.setAttribute(binding.arg, binding.value)
  }
})

Then use it in your template like v-bind but with v-attr:

<option v-attr:selected="location === 'all'">

updated codepen

https://stackoverflow.com/a/67577063/6277151