Shorthand notation for conditional attributes (Solved)

[mboeni]

Hi there

I am using this snippet of code:

<div v-for="message in messages" v-bind:key="message.id">
  <div v-if="message.from === 'Michael'">
    <q-chat-message
      :name="message.from"
      :text="[message.text]"
      sent
    />
  </div>
  <div v-else>
    <q-chat-message
      :name="message.from"
      :text="[message.text]"
    />
  </div>

and immediately felt my solution is not really elegant. I am replicating a lot of code for one single attribute (sent). Is there a more elegant way to do a conditional check for an attribute (in this case for sent in q-chat-message?

Cheers,
M.

[s.molinari]

If I understand what your issue is, try this.

    <q-chat-message
      :name="message.from"
      :text="[message.text]"
      :sent="message.from === 'Michael'"
    />
  </div>
  <div v-else>
    <q-chat-message
      :name="message.from"
      :text="[message.text]"
    />
  </div>

Scott

[mboeni]

@s-molinari

Yep, that’s what I was looking for

Actually, all you need is this part:

<q-chat-message
   :name="message.from"
   :text="[message.text]"
   :sent="message.from === 'Michael'"
/>

Cheers,
Michael

[s.molinari]

Naturally. It was late yesterday evening.

Scott