how to pass a text property to chat-message component in quasar-vue?

user_4170988 0
Viewed 324

I'm trying to create a simple chat window using the Quasar framework

in my template, I have this

        <div v-for="message in this.chatMessages" :key="message.id">
          <q-chat-message
            :name="message.name"
            :text="message.text"
            :sent="message.sent"
          >
            <slot name="avatar">
              <q-avatar size="30">
                <img alt="avatar" :src="message.avatar"/>
              </q-avatar>
            </slot>
          </q-chat-message>
        </div>

and in the data I have the following

  data () {
    return {
      text: null,
      fixed: false,
      chatMessages: [
        {
          id: 123,
          name: 'Support',
          avatar: 'https://cdn.quasar.dev/img/avatar1.jpg',
          text: ['hey, how are you?', ''],
          sent: true
        },
        {
          id: 456,
          name: 'me',
          avatar: this.$store.getters['xstore/getAvatar'],
          text: ['doing fine, how r you?', ''],
          sent: false
        }
      ]
    }
  },

According to the documentation https://quasar.dev/vue-components/chat#introduction the component receives an array as text, like below

<q-chat-message
        :text="['doing fine, how r you?']"
      />

chat message working

but when I run it the text never appears on the screen, so, I'm not sure if I'm doing something wrong with the array properties, the rest of the attributes are working fine

chat box

How an array must be passed within a div v-for? is there a magic trick?

If I hardcode the text message as below they work :(

:text="['This is a hardcoded message']"
quasar-framework vue-component vue.js
2 Answers

this was how I solved it in case someone goes through the same

        <div v-for="message in this.chatMessages" :key="message.id">
          <q-chat-message
            :avatar="message.avatar"
            :name="message.name"
            :sent="message.sent"
          >
            <div v-for="text in message.text" :key="text">
              <div>
                {{ text }}
              </div>
            </div>
          </q-chat-message>
        </div>
user_41709880

You are using the slot incorrectly. In this case, it is not needed at all, the avatar will be shown correctly. But if you want to use an avatar slot, it will look like this:

    <template v-slot:avatar>
      <img
        class="q-message-avatar q-message-avatar--sent"
        src="https://cdn.quasar.dev/img/avatar4.jpg"
      >
    </template>
user_64526460
Related