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

Answer 1

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"
>