How to conditionally add attributes in vue.js?

Question

In vue, I have this

<v-dialog v-model="data_table.dialog">

and I have a observable variable is_mobile. I want it so that the above tag looks like this

<v-dialog v-model="data_table.dialog">

when is_mobile is false. And look like this

<v-dialog fullscreen hide-overlay transition="dialog-bottom-transition" v-model="data_table.dialog">

when is_mobile is true.

How can I do it?

I only know how to set the attribute value, but in this case, I want the attribute itself to be included or not, and for the transition, attribute and value included or attribute not included. Basically exactly the result as shown above, and not like fullscreen="true"/fullscreen="false".

Thanks

Possible duplicate of [VueJS conditionally add an attribute for an element](https://stackoverflow.com/questions/42874314/vuejs-conditionally-add-an-attribute-for-an-element) — , Nov 09 '18 at 17:15
could you put both in, and add v-if="is_mobile" for the conditional rendering of the correct element? — Blunt Jackson, Nov 09 '18 at 17:17
yes, but the contents of the tag is a lot, so I don't want to repeat it twice. — omega, Nov 09 '18 at 17:18
@ChrisG that still adds the value true or false to the attribute, it doesn't actually remove or keep it. — omega, Nov 09 '18 at 17:19
As the docs and the comment to the linked question say, if an attribute's value evaluates to something falsey, it's omitted from the rendered HTML. — , Nov 09 '18 at 17:24
I mean for transition, either omit it or keep it as `transition="dialog-bottom-transition"`. — omega, Nov 09 '18 at 17:39
Seems to me like you'd have to add the transition in JS in a method or a computed. — dmikester1, Nov 09 '18 at 18:17
I think the best solution would be to use v-if with the element https://vuejs.org/v2/guide/conditional.html#v-if — Hamilton Gabriel, Nov 09 '18 at 18:36

score 0 · Answer 1 · edited Jul 16 '22 at 05:28

In Vue.js attributes or bindings can be set dynamically by using v-bind directive.

For example above it can be presented as a computed property:

computed: {
  dialogBindings () {
    if (!this.is_mobile) {
      return {
        fullscreen: true,
        hideOverlay: true,
        transition: 'dialog-bottom-transition'
      }
    }
    return {}
  }
}

And used inside component's template:

<v-dialog   
  v-model="data_table.dialog"
  v-bind="dialogBindings"
>

How to conditionally add attributes in vue.js?

1 Answers1