Shorthand notation for conditional attributes (Solved)



  • 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.



  • 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



  • @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



  • Naturally. It was late yesterday evening. ๐Ÿ˜Š

    Scott


Log in to reply