I am trying to do the following:

{{ limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre' }}

However Vue does not accept that i add another element <i> inside the {{ }}. How do I get around this? \<i does not work...

I am trying to do the following:

{{ limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre' }}

However Vue does not accept that i add another element <i> inside the {{ }}. How do I get around this? \<i does not work...

• javascript
• vue.js
• vuejs2
• vue-ponent

3 Answers 3

You can use v-if and v-else as follows:

new Vue({
     el: '#app',
     data(){
          return{
               limit_by:4
          }
     }
});

<script src="https://unpkg./vue/dist/vue.min.js"></script>
<script src="https://kit.fontawesome./a076d05399.js"></script>
<div id="app">
     <p v-if="limit_by===4">
          <i class="fas fa-plus"></i>Visa fler...
     </p>
     <p v-else>
          Visa färre
     </p>
</div>

You can check the docs for more details.

Try to use conditional rendering with v-if and v-else directives :

<template v-if="limit_by===4">
   <i class="fas fa-plus"></i>Visa fler...
</template>
<template v-else>
   Visa färre
</template>

It is important to note that the use of double mustaches interprets the data as plain text, not html. I'm paraphrasing here but check out the v-html directive that is packaged with Vue on this page.

Using the v-html directive means you could still maintain the use of your ternary statement as follows:

<div v-html="limit_by===4 ? '<i class="fas fa-plus"></i>Visa fler...' : 'Visa färre'"></div>