Как условно добавить атрибуты в vue.js?

Question

У меня есть это

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

и у меня есть наблюдаемая переменная is_mobile. Я хочу, чтобы вышеуказанный тег выглядел следующим образом

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

когда is_mobile ложно. И выглядеть так

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

когда is_mobile истинно.

Как я могу это сделать?

Я знаю только, как установить значение атрибута, но в этом случае я хочу, чтобы сам атрибут был включен или нет, а для перехода включены атрибут и значение или атрибут не включен. В основном именно такой результат, как показано выше, а не как fullscreen="true" / fullscreen="false".

Спасибо

Answer 1

В Vue.js атрибуты или привязки могут быть установлены динамически с помощью директивы v-bind .

Например, выше, он может быть представлен как вычисляемое свойство:

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

И используется внутри шаблона компонента:

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