Vue.js+Laravel中document.querySelector获取meta标签返回null问题

问题背景 #

在Vue实例的data选项中执行document.querySelector('meta[name="user_id"]').content时触发上述错误，相关代码如下：

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>

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),
    }
})

核心错误原因 #

• 目标meta标签不存在：你提供的HTML代码里完全没有<meta name="user_id">标签，document.querySelector自然找不到对应元素，返回null。
• DOM查询时机过早：即使存在该meta标签，Vue实例初始化时（data选项执行阶段），浏览器可能还未完成整个DOM的渲染，此时执行document.querySelector同样会返回null，访问null.content就会抛出类型错误。

修复建议 #

1. 添加缺失的meta标签：在HTML的<head>区域添加目标meta标签，示例：

<meta name="user_id" content="{{ auth()->user()->id }}">

2. 延迟DOM查询到合适时机：将DOM查询逻辑移到mounted钩子中（此时Vue实例已挂载，DOM树已完全渲染），同时增加空值判断避免报错：

new Vue({
    el: '#app',
    data: {
        id: null
    },
    mounted() {
        const userMeta = document.querySelector('meta[name="user_id"]');
        if (userMeta) {
            this.id = userMeta.content;
        } else {
            console.error('未找到name为user_id的meta标签');
        }
    },
    methods: {
        scrollToEnd: function () {
            let container = this.$el.querySelector("#card-message-scroll");
            container.scrollTop = container.scrollHeight;
        }
    },
    watch: {
        messages: _.debounce(function() {
            this.scrollToEnd()
        }, 10),
    }
})

内容的提问来源于stack exchange，提问作者dev gomar