Dynamically set role="status" with vue

Question

I'm looking for a way to set the role="status" attribute using vue.

Something like :role="{'status': isStatus}"

<span class="result-total" role="status">
  <span class="result-number">{{ resultNumber }}</span>
  <label>Results found</label>
</span>

Answer 1

:role="{'status': isStatus}" is special syntax usable only for style and class bindings. For anything else you need to use standard JS bindings.

Computed property is best and most performant solution:

computed: {
  role() { return isStatus ? 'status' : '' }
}

<span class="result-total" :role="role">
  <span class="result-number">{{ resultNumber }}</span>
  <label>Results found</label>
</span>

Answer 2

To set strings based on a boolean you can do something like this:

:role="isStatus ? 'status' : ''"

Change '' to whatever default role you want.

See JavaScript documentation:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator