Vue.js - How to use ternary operator to return html in vue with font awesome icons

user_13708703 0
Viewed 791

I have the following in vue:

      <div class="pt-2">
        <button
          class="bg-gradient-to-r from-green-100 to-blue-100 rounded p-3 w-full text-xl font-medium focus:outline-none"
          @click="isLoading = true"
          :disabled="isLoading"
        >
          {{isLoading ? '<i class="fas fa-circle-notch fa-spin"></i>' :
          'Register'}}
        </button>
      </div>

How would I get it to return the icon instead of showing: enter image description here

vuejs2 tailwind-css vue.js javascript
1 Answers

You should use conditional rendering using v-if directive :

   <div class="pt-2">
        <button
          class="bg-gradient-to-r from-green-100 to-blue-100 rounded p-3 w-full text-xl font-medium focus:outline-none"
          @click="isLoading = true"
          :disabled="isLoading"
        >
          <i v-if="isLoading" class="fas fa-circle-notch fa-spin"></i>
          <span v-else >Register</span
        </button>
      </div>
user_81728570
Related