I've tried to find references, but haven't solved it, I have the code below..
why document.querySelector('meta[name="user_id"]').content
Uncaught TypeError: document.querySelector(...) is null
this my code
html
<div class="card"> <div class="card-body card-message" id="card-message-scroll"> <ul v-if="isActive != null" class="list-group list-group-flush"> <div v-for="(message, index) in messages" v-bind:key="index"> <li v-if="message.from_id != {{ auth()->user()->id }}" class="list-group-item"> <div class="list-message-item"> <div class="media"> <img class="mr-3 rounded-sm rounded-circle" :src="message.avatar" alt="profile"> <div class="media-body"> <div class="alert alert-primary mb-0"> @{{ message.content }} </div> <small> <i>@{{ new Date(message.created_at).toLocaleDateString()}}</i> </small> </div> </div> </div> </li> <li v-else class="list-group-item"> <div class="list-message-item right"> <div class="alert alert-secondary mb-0"> @{{ message.content }} </div> <small class="float-right"> <i>@{{ new Date(message.created_at).toLocaleDateString()}}</i> </small> </div> </li> </div> </ul> <h5 v-else class="text-center">Pilih user untuk mengirim pesan</h5> </div> </div> this my app.js
new Vue({ el: '#app', data: { id: document.querySelector('meta[name="user_id"]').content, }, mounted() { }, methods: { scrollToEnd: function () { let container = this.$el.querySelector("#card-message-scroll"); container.scrollTop = container.scrollHeight; } }, watch: { messages: _.debounce( function() { this.scrollToEnd() }, 10), } }) Uncaught TypeError: document.querySelector(...) is null
why ?
