[Vue warn]: Error in nextTick: "InvalidCharacterError: String contains an invalid character"

Question

Before I resolve to stackoverflow I 've gone to numerous site to find the source for this problem but to no avail. I have two files, master.blade.php and header.blade.php. master use @include to header file. I use vuejs to get notification and display them in header. It shows error in mozilla firefox console of

[Vue warn]: Error in nextTick: "InvalidCharacterError: String contains an invalid character"

DOMException: "String contains an invalid character"

please help me. This is my master.blade.php code

@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

watch for something very silly, either in the template DOM or in the blade template where you are rendering your component, like in your case, you are missing an ">" in span opening tag. In my case, it was a "," in the blade template where i was rendering my vue component. due to presence of a comma, the whole vue component was not rendering properly,

the characters might be: ",", ":", or "<", ">", etc...

I figured it out by checking my code inspector. there my vue component was sitting and not rendering, but it clearly shows where i am inserting an extra prop as a ",".

Answer 2

In my case scenario, obtaining the same error, was because I was adding commas between HTML attributes, example:

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