javascript - 仅在某些环境下 Vue 中的字符串长度无效 RangeError

Question

我在生产环境和测试环境中有一个 Vue 组件。在生产中它在一个 wordpress 主题中，我得到了错误:

jquery.min.js:2 Uncaught RangeError: Invalid string length
    at repeat$1 (vue.js:11398)
    at generateCodeFrame (vue.js:11380)
    at vue.js:11467
    at Array.forEach (<anonymous>)
    at compileToFunctions (vue.js:11464)
    at Vue.$mount (vue.js:11688)
    at Vue._init (vue.js:4901)
    at new Vue (vue.js:4967)
    at HTMLDocument.<anonymous> ((index):234)
    at l (jquery.min.js:2)

在测试中，我只是使用了一个独立的文件，我没有收到任何错误，组件工作正常。我假设在导致错误的 Wordpress 和服务器中存在一些不同之处。

根据我的阅读，它只是一个导致错误的长字符串，但如果您不能在本地重复错误，您将如何修复它？ Wordpress 是否有任何常见的“Got Ya's”？

组件本身非常简单:

 <div v-for="event in events" style="    margin: 10px;" v-if="events">
                                <button class="accordion" @click="show">
                                    <a :href="event.url"> Buy Now </a>
                                    <p v-text="event.name.text"></p>
                                    <span class="date">{{ event.start.local | date }}</span>
                                    <span class="capacity" v-if="event.capacity"> Capacity: <span v-text="event.capacity"></span></span>

                                </button>

                                <div class="panel">
                                  <div class="accordian-body" v-html="event.description.html"></div>
                                  <a :href="event.url" class="buy-bottom"> Buy Now </a>
                                </div>

                            </div>

    jQuery(document).ready(function($) {

                    // Using a basic set of effect
                    var vm = new Vue({
                        el: '#main',
                        data: {

                                events: <?php echo json_encode($another); ?>, 
                        },

                        filters: {
                            date: function (value) {
                                return moment(value).format("dddd, MMM Do");   
                            }
                        },
                        mounted: function () {

                            console.log(this.events)
                            this.$nextTick(function () {
                                // code that assumes this.$el is in-document


                                var acc = document.getElementsByClassName("accordion");
                                var i;

                                for (i = 0; i < acc.length; i++) {
                                    acc[i].onclick = function(){
                                        this.classList.toggle("active");
                                        this.nextElementSibling.classList.toggle("show");
                                    }
                                }
                            })
                        },
                        methods:{
                            show: function(event){

                                var clickedElement = event.target;
                                $(clickedElement).siblings('panel').toggle("show");
                            }
                        }
                    })

                })

Answer 1

该错误具有误导性。我有一个类似的问题，发现这是内联模板的问题。有一个样式标签，它导致了我的项目中的问题。 就您而言，我认为问题出在数据对象中。像这样在事件数据对象中使用字符串文字，它应该可以工作:

data: {

            events: `<?php echo json_encode($another); ?>`,
    },