Dynamically set role="status" with vue-CodePudding

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

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

<span  role="status">
  <span >{{ resultNumber }}</span>
  <label>Results found</label>
</span>

CodePudding user response：

: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  :role="role">
  <span >{{ resultNumber }}</span>
  <label>Results found</label>
</span>

CodePudding user response：

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