Получить данные из firestore и визуализировать vue компонент по событию onclick - PullRequest
Новая
       16

Получить данные из firestore и визуализировать vue компонент по событию onclick

0 голосов
/ 15 апреля 2020

В моем коде я прикрепил событие onclick Vue к строке таблицы. Когда я щелкаю по строке, я хотел бы получить данные из пожарного магазина с идентификатором строки таблицы в качестве идентификатора документа. Однако, пока я щелкаю строку, мой код выбирает данные из хранилища и получает данные, но мой экземпляр Vue не отображает их в HTML DOM.

Вот мой код 

let memberElements = document.querySelectorAll('.memberData');
memberElements.forEach(elem => {
    new Vue({
        el: elem,
        data: {
            members: [],
            memberBookTable: '',
            message: "",
        },
        mounted() {
            firebase.firestore().collection('users').onSnapshot(snapshot => {
                this.members = [];
                snapshot.forEach(doc => {
                    this.members.push(doc.data());
                })

            })
        },
        beforeMount() {
            this.memberBooks(1715004);
        },
        methods: {
            memberBooks(memberNo) {
                console.log("function called")
                this.message = "hello";
                firebase.firestore().collection('transactions').where("member.no", "==", memberNo).get()
                    .then(member => {
                        this.memberBookTable = ''
                        member.forEach(issue => {
                            var booksIds = Object.entries(issue.data().books);
                            var rawHTML = '';
                            booksIds.forEach(id => {
                                rawHTML = ` <tr id="${id[0]}">
                            <td v-if="id[1].isReturned">
                                <span class="bg-success text-white m-0 p-2 rounded-pill">Returned</span>
                            </td>
                            <td v-else>
                            <a href="#" class="btn btn-info btn-sm">Return</a>
                        </td>
                        <td>${id[1].no}</td>
                        <td>${id[1].name}</td>
                        <td>${issue.data().takenDate.toDate().toDateString()}</td>
                        <td>${issue.data().dueDate ? issue.data().dueDate.toDate().toDateString() : 'None'}</td>
                        <td>${issue.data().librarian}</td>
                        <td>${id[1].fine ? id[1].fine : 0}</td>
                        </tr> `;
                                this.memberBookTable += rawHTML;
                                console.log(this.memberBookTable)
                            })
                        })
                    }).catch(error => { console.log(error.message) })
            },
        }
    })
});

При нажатии на консоль я получаю "функцию под названием" и " "memberTableData , который является templateString. Я тоже попробовал beforemount(), но он не работает. Как отобразить данные Dynami c в моих данных после щелчка по строке. Заранее спасибо

...