Vuejs: Как задать модальный размер в соответствии с условием - PullRequest
Новая
       16

Vuejs: Как задать модальный размер в соответствии с условием

1 голос
/ 26 мая 2020

У меня на странице реализовано модальное окно bootstrap - vue. Размер модального окна lg или большой. Для параметра c, если для условия мне нужен размер как lg, а для условия else - как md. Есть ли способ добиться этого, используя свойства vuejs. 

<b-modal id="modal-1" size="lg">
  <upgrade-popup></upgrade-popup>
</b-modal>

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

v-bind:class="{ active: isActive, 'text-danger': hasError }"

Пробовал такое состояние, но похоже, что оно не работает. 

:size="{'lg': freeUser, 'md': !freeUser}"

1 Ответ

1 голос
/ 26 мая 2020

Сокращение if

Вы можете использовать сокращение if :size="freeUser ? 'lg' : 'md'" Использование сокращения позволяет быстро получить if/else, но ограничивается этим. но позволяет избежать лишней разметки.

Вычисляемое свойство

Вы также можете использовать вычисляемое свойство, которое кэширует значение. и пересчитывается только при изменении используемых внутренних свойств. В данном случае freeUser. 

<b-modal :size="getSize"></b-modal>


<script>
{
  computed: {
    getSize() {
      return this.freeUser ? 'lg' : 'md'
    }
  }
}
</script>

Метод

Параметр метода позволяет легко обрабатывать больше условий или более сложные случаи, такие как вычисляемое свойство. но, в отличие от вычисляемого свойства, методы позволяют передавать свойства, которые могут быть полезны, если вам нужно обработать его, например, на основе содержимого в v-for. 

<b-modal :size="getSize(freeUser)"></b-modal>


<script>
{
  methods: {
    getSize(freeUser) {
      return this.freeUser ? 'lg' : 'md'
    }
  }
}
</script>
...