Недопустимая длина строки RangeError в Vue только в определенных средах
У меня есть компонент 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 и на сервере есть что-то другое, что вызывает ошибку.
Из того, что я прочитал, это просто длинная строка, которая вызывает ошибку, но как ее исправить, если вы не можете повторить ошибку локально? Есть ли какие-то общие "Got Ya" с Wordpress?
Сам компонент очень прост:
<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.info(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");
}
}
})
})
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Ошибка вводит в заблуждение. У меня была аналогичная проблема, и я обнаружил, что это проблема со встроенным шаблоном. Был тег стиля, который вызывал проблему в моем проекте. В вашем случае, я думаю, проблема в объекте данных. Используйте строковый литерал в вашем объекте данных событий, подобно этому, и он должен работать:
data: {
events: `<?php echo json_encode($another); ?>`,
},
Эта ошибка описана и устранена здесь: https://github.com/vuejs/vue/issues/9504
Ошибка в шаблоне генерирует ошибку в JS из-за ошибки в generateCodeFrame() или repeat$1() (может быть исправлено тем или иным образом).
Другой случай
В моем случае эта ошибка была вызвана тем, что я повторяю один и тот же атрибут HTML
<div class = "awesome wow"
class = "anotherawesome">
</div>
Это поднимет тот же вопрос.
Решение
<div class = "awesome wow anotherawesome">
</div>
Спасибо, эта ошибка вводит в заблуждение. И, кажется, трудно найти причину.