Question

在我决定使用stackoverflow之前，我已经去了许多站点来找到此问题的根源，但无济于事。我有两个文件， master.blade.php 和 header.blade.php 。主使用@include到头文件。我使用vuejs来获取通知并将其显示在标题中。它显示

的mozilla firefox控制台中的错误

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

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>：

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

这对Vue无效，并且会失败。

Answer 2

在模板DOM或用于渲染组件的刀片模板中监视非常愚蠢的事情，例如在您的情况下，跨度打开标记中缺少“>”。就我而言，这是我在渲染vue组件的刀片模板中的“，”。由于存在逗号，整个vue组件无法正确呈现，

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

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

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

2 个答案: