[Vuejs]-How to add condition to HTML code in Vue.js?

by

2đź‘Ť

âś…

According to your comment above:

@LinusBorg No, I want the “Bar” to show regardless of the value of message_type, it’s just if message_type is null, I don’t want a wrapper around it.

There is no other way than to duplicate the inner div.

<template v-for="(index, message) in messages">
  {literal}
  <div class="message_block {{message.message_type}}" v-if="message.message_type">
    <div class="message">
      {{message.message}}
    </div>
  </div>

  <div v-if="!message.message_type" class="message">
    {{message.message}}
  </div>
  {/literal}
</template>

If you don’t want to duplicate it, you can either define it as a small component to re-use it, or use a partial.

👤Linus Borg

Leave a comment