How to add condition to HTML code in Vue.js?

Question

I have the following template code:

<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>
  {/literal}
</template>

What I'm trying to do is show the one line - <div class="message_block"..., if message.message_type is not equal to null, or is not undefined.

This is the data I've got:

var demo = new Vue({
  el: '#testblock',
  data: {
    messages: [
      { message: 'Foo', message_type: "left" },
      { message: 'Bar', message_type: null }
    ]
  }
})

I'm trying to add the wrapper <div class="message_block">, if the message_type is not equal to null.

Answer 1

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.