[Vuejs]-V-html with conditional rendered

by

4👍

✅

How about putting all your logic inside of your computed property?

HTML part:

<button type="button" class="btn btn-warning ml-auto" v-if="steps.length - 1 == currentStep" @click="submitProject" v-html="paymentAmount"></button>

Vue part:

paymentAmount() {
    if(this.model.projectSelectedOptions.length < 1)
    {
        return 'Publish without option (free)';
    }
    else
    {
        var amount = 0;
        this.model.projectSelectedOptions.forEach(function(option) {
        if (option == 1) {
          option = 19.99
        } else if (option == 2) {
          option = 9.99
        } else {
          option = 7.99
        }
        amount += option;
        });
        return 'Next : payment (' + amount.toFixed(2) + ' € <span class="price-ht">HT</span>)';
    }
}
👤Jns

1👍

You might use a conditional span as button content:

<button
  type="button"
  class="btn btn-warning ml-auto"
  v-if="steps.length - 1 == currentStep"
  @click="submitProject">
  <span v-if="model.projectSelectedOptions.length < 1">Publish without option (free)</span>
  <span v-else v-html="paymentAmount"></span>
</button>
👤Psidom

Leave a comment