[Vue 警告]：nextTick 中的错误：“InvalidCharacterError：字符串包含无效字符”答案

【问题标题】：[Vue warn]: Error in nextTick: "InvalidCharacterError: String contains an invalid character"[Vue 警告]：nextTick 中的错误：“InvalidCharacterError：字符串包含无效字符”
【发布时间】：2019-06-01 04:03:24
【问题描述】：

在解决 stackoverflow 问题之前，我已经访问了许多站点以查找此问题的根源，但无济于事。我有两个文件，master.blade.php 和 header.blade.php。掌握使用@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>

【问题讨论】：

你得到错误的行号了吗？
@samayo 不，不幸的是我没有。你可以在这里查看详细信息。 imgur.com/a/opgs0TZ
查看文件中显示的数字并检查无效字符串
您的代码周围缺少<script>...var vueNotifications = new Vue... 应该在脚本标签中
@ljubadr vue 已经在

标签： laravel vue.js

【解决方案1】：

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

字符可能是：“，”，“：”，或“”等......

我通过检查我的代码检查器发现了这一点。那里我的 vue 组件坐着而不是渲染，但它清楚地显示了我在哪里插入一个额外的道具作为“，”。

【讨论】：

原来这是一个愚蠢的错误。在错误的地方不需要的字符。
在我的情况下，它是错误属性名称中的字符：<b-col -v="center">。看这个：-vbad 属性破坏了整个应用程序，并且没有关于这个错误位置的信息，请注意！
我在模板中写了 $ref="name" 而不是 ref="name" :facepalm: 。感谢您指出这一点

【解决方案2】：

通常这意味着 DOM 存在问题。在上面，看起来问题是您的<span> 中有一个流浪的@：

<p><span @{{notification.data.message}}></span></p>

这对 Vue 无效并且会失败。

【讨论】：

@ 没有被渲染，它只是告诉 Blade 直接回显双括号内容，而不是将其解析为 PHP 代码。在这种情况下，Vue 绝对需要解析它。

【解决方案3】：

在我的情况下，获得相同的错误，是因为我在 HTML 属性之间添加了逗号，示例：

<some-tag 
 some-attr1="something", <---- WRONG
 some-other="xxx", <---- WRONG
 other="yyy"
></some-tag>

【讨论】：