How to concatenate in v-bind:class?

Question

Vue.js

Hello, I have an input parameter theme, and this is the element in the component (if there are several of them, I just didn’t throw all the code here):

<button :disabled="!prevPage" v-bind:class="{ pagination__btn_disabled: !prevPage }" type="button" title="Назад" class="pagination__btn" @click="onPrevPage">
  <img class="pagination__icon" src="/svg/admin/pagination/prev.svg" alt="Назад">
</button>

And you need to do what if the parameter is themetrue, then we add a class to the button, of this kind: pagination__btn_theme_ + themeplease tell me how to do it more correctly? Tried to do it like this:

{ pagination__btn_disabled: !prevPage, 'pagination__btn_theme_' + theme : theme}

But this throws an error.
Thank you in advance for your response.

Answer 1

computed:{
  classes(){
    return {
      pagination__btn_disabled: !this.prevPage,
      [`pagination__btn_theme_${this.theme}`]: !!this.theme,
    }
  }
}
<button
  class="pagination__btn"
  :class="classes"
  :disabled="!prevPage"
  type="button"
  title="Назад"
  @click="onPrevPage"
>
  <img class="pagination__icon" src="/svg/admin/pagination/prev.svg" alt="Назад">
</button>