Как в Material Vue Modal динамически менять контент?

Question

[Aleksandr_KH]

Есть список сообщений, который я вывожу через v-for. Изначально я вижу превью сообщения, т.е. не полный текст, а чтобы увидеть полный, я должен кликнуть на соответствующее сообщение, всплывает модальное окно со всеми деталями.
Суть вопроса в том, как выводить соответствующий контент в модальном окне?

Вывод сообщений:

<div v-for="message in messagesList"
                     :key="message.msgFrom"
                     :class="`message-row d-flex ${message.msgNew}`"
                     @click="showMessageModal = true">
                    <div class="message-date">
                        <span class="day">{{ message.day }}</span>
                        <span class="month">{{ message.month }}</span>
                    </div>
                    <div class="message-content">
                        <span class="message-from">Message from {{ message.msgFrom }}</span>
                        <p class="message-txt">{{ message.msgText }}</p>
                    </div>
                </div>

Модальное окно:

<md-dialog :md-active.sync="showMessageModal">
            <div class="box-wrapper">
                <div class="box-header">
                    <div class="box-header-left">
                        <span class="box-title">Message from {{ Здесь нужно выводить соответствующее имя }}</span>
                    </div>
                    <div class="box-header-right">
                        <div class="icon-wrap" @click="showMessageModal = false">
                            <Icon name="close" fontSize="23px" color="#fff" />
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    {{ А здесь выводить полное сообщение }}
                </div>
            </div>
        </md-dialog>

Answer 1

[0xD34F]

Добавьте в компонент свойство, которое будет ссылкой на кликнутое пользователем сообщение, и при открытии окна обновляйте его:

@click="openModal(message)"

data: () => ({
  openedMessage: {},
  ...
}),
methods: {
  openModal(message) {
    this.openedMessage = message;
    this.showMessageModal = true;
  },
  ...
},

Ну а в модальном окне, соответственно, выводите нужные значения:

<span class="box-title">{{ openedMessage.какоеТамУВасСвойствоОтвечаетЗаЭтотTitle }}</span>
...
<div class="box-body">{{ openedMessage.нуТутТожеВамВиднееЧтоНаписать }}</div>

Comments

[Aleksandr_KH]

Огромное Вам спасибо! Все получилось, все работает, Вы герой :)