Как условно добавить атрибуты в vue.js?
In vue у меня есть это
<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".
Спасибо
не могли бы вы вставить оба и добавить v-if = "is_mobile" для условного рендеринга правильного элемента?
да, но содержимого тега очень много, поэтому я не хочу повторять его дважды.
@ChrisG, который все еще добавляет значение true или false к атрибуту, на самом деле он не удаляет и не сохраняет его.
Как говорится в документации и комментарии к связанному вопросу, если значение атрибута оценивается как ложное, оно опускается в отображаемом HTML.
как я могу его опустить или оставить с определенным значением?
что-то вроде <v-dialog fullscreen = "is-mobile" hide-overlay = "is-mobile" ..
Я имею в виду переход: либо опустите его, либо оставьте как transition = "dialog-bottom-transition".
Мне кажется, что вам нужно добавить переход в JS в метод или вычисляемый.
Думаю, лучшим решением было бы использовать v-if с элементом vuejs.org/v2/guide/conditional.html#v-if
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В Vue.js атрибуты или привязки могут быть установлены динамически с помощью директивы v-привязка.
Например, выше его можно представить как вычисляемое свойство:
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"
>
Возможный дубликат VueJS условно добавляет атрибут для элемента