Vue Selected Bind Does Not Work on Option Tags

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>

[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

[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?