Добавить по условию Vue.js

Question

Подскажите пожалуйста есть компонент кнопки у него есть пропс disabled который делает ее неактивной, как добавить его по условию ? v-if="{showEditBranch: disabled}" так не работает

<b-button>Small Button</b-button>

data() {
   return {
     showEditBranch: true
   }
}

Answer 1

Насколько понимаю, речь идет о компоненте Button (BootstrapVue, документация)

Рассмотрим пример из документации:

<b-button disabled size="lg" variant="primary">Disabled</b-button>

В данном примере prop disabled отвечает за то, будет ли иметь кнопка свойство disabled. Исходя из документации Vue по передаче входных параметров, компонент из примера имеет props disabled в значении true. В prop disabled можно передать переменную из data() так:

<b-button :disabled="variable" size="lg" variant="primary">Disabled</b-button>

где variable - переменная из data()

для приведенного вами кода:

<b-button :disabled="showEditBranch">Small Button</b-button>

data() {
   return {
     showEditBranch: true
   }
}

Answer 2

Ответ выше описывает ваш кейс, но добавлю еще один комментарий, такое использование v-if="{showEditBranch: disabled}" всегда будет давать true, потому что в данном случае директива v-if будет воспринимать {showEditBranch: disabled} как простой объект и будет приводить его к значению типа boolean (приведение объектов в js дает true).

БЛОГ НА HUSL

Добавить по условию Vue.js

Ответы (2 шт):