My Vue component is currently live in production within a WordPress theme, but I am encountering an error:
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)
Interestingly, when testing the component as a standalone file, no errors occur and everything works perfectly. It seems there may be some differences in the WordPress environment or server that are triggering this error.
Many sources suggest that the error is related to a long string, but without being able to replicate it locally, how can one resolve it? Are there any common pitfalls associated with WordPress integration?
The structure of the component itself is quite simple:
<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 effects
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 the 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");
}
}
});
});