[Vue 警告]：nextTick 中的错误：“InvalidCharacterError: String contains an invalid character”

Question

在我决定使用 stackoverflow 之前，我已经去了很多网站寻找这个问题的根源，但无济于事。我有两个文件，master.blade.php和header.blade.php。master 使用@include 到头文件。我使用 vuejs 来获取通知并将它们显示在标题中。它在 mozilla firefox 控制台中显示错误

[Vue 警告]：nextTick 中的错误：“InvalidCharacterError: String contains an invalid character”

DOMException: “字符串包含无效字符”

请帮我。这是我的 master.blade.php 代码

@include('backend.partials.sidebar')
<script src="{{asset('js/vue.js')}}"></script>
var vueNotifications = new Vue({
        el: '#vue-notifications',
        data: {
            results: null,
            timer: '',
        },
        created: function () {
            this.fetchNotifications();
            this.timer = setInterval(this.fetchNotifications, 15000)
        },
        methods: {
            fetchNotifications: function () {
                $.ajax({
                    url: '{{ url("/notifications/notify") }}',
                    type: "GET",
                    success: function (results) {
                        console.log(results);
                        vueNotifications.results = results;
                    },
                    error: function () {
                        // alert("Error get notifications");
                        console.log('error get notifications');
                    }
                });
            },
            redirect: function (id, url) {
                //console.log(id);
                data = {
                    id: id,
                }
                $.ajax({
                    url: '{{ url("/notifications/update") }}',
                    type: "POST",
                    data: data,
                    success: function (results) {
                        //console.log("redirect: " + results)
                        location.href = url
                    },
                    error: function () {
                        // alert("Error get notifications");
                        console.log('Error update notifications');
                    }
                });
                //location.href = this.url
            }
            //end methods
        }
    });

header.blade.php

<div class="messages-notifications os-dropdown-trigger os-dropdown-position-left" id="vue-notifications">
          <i class="os-icon os-icon-mail-14"></i>
              <div class="new-messages-count">
                  12
              </div>
              <div class="os-dropdown light message-list" >
                  <ul>
                      <div v-if="results !== null">
                        <div v-if="results.length !== 0">
                            <div v-for="notification in results">
                                <li>
                                    <a href="#" v-on:click="redirect(notification.id,notification.data.url)">
                                        <div class="message-content">
                                            <h6 class="message-title">
                                                <p><span @{{notification.data.message}}></span></p>
                                                <p>@{{notification.created_at}}</p>
                                            </h6>
                                        </div>
                                    </a>
                                </li>
                            </div>
                        </div>
                      </div>
                      <div v-else>
                          <a href="#">
                              <div class="message-content">
                                <h6 class="message-title">
                                    Tiada notifikasi baru
                                </h6>
                              </div>
                          </a>
                      </div>
                  </ul>
              </div>

          </div>

Answer 1

注意一些非常愚蠢的事情，无论是在模板 DOM 中还是在您渲染组件的刀片模板中，就像在您的情况下，您在 span 开始标记中缺少“>”。就我而言，它是我渲染 vue 组件的刀片模板中的“,”。由于逗号的存在，整个 vue 组件无法正确渲染，

字符可能是：“,”、“:”或“<”、“>”等...

我通过检查我的代码检查器弄清楚了。我的 vue 组件在那里，没有渲染，但它清楚地显示了我在哪里插入一个额外的道具作为“，”。