Vue JS: How to bind v-text to a variable

Question

I have a button, the text on which will be different in different situations. Currently, I have defined it as follows:

<v-btn v-if="isVariableX" v-text="this.$getText('BUTTON_TITLE_X')"></v-btn>
<v-btn v-if="isVariableY" v-text="this.$getText('BUTTON_TITLE_Y')"></v-btn>
<v-btn v-if="isVariableZ" v-text="this.$getText('BUTTON_TITLE_Z')"></v-btn>

But I want to defined az follows:

<v-btn  v-bind:v-text="[
                    {isVariableX: this.$getText('BUTTON_TITLE_X')},
                    {isVariableY: this.$getText('BUTTON_TITLE_Y')},
                    {isVariableZ: this.$getText('BUTTON_TITLE_Z')},
                    ]">

                </v-btn>

Is there a way to define it this way?

Answer 1

you can try something like this

In html part:-

 <v-btn
    class="ma-2"
    v-text="getButtonLabel()"
  >
  </v-btn>

In script :-

getButtonLabel() {
      if(this.isVariableX) {
        return this.$getText('BUTTON_TITLE_X');
      } else if(this.isVariableY) {
        return this.$getText('BUTTON_TITLE_Y');
      } else if(this.isVariableZ) {
        return this.$getText('BUTTON_TITLE_Z');
      }
    }