admin管理员组文章数量:1434949
I have a Vue ponent in production and a testing environment. In production its within a wordpress theme and I get the 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 pileToFunctions (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)
In testing I just am using a stand alone file and I get not error and the ponent works fine. I assume there is something different within the Wordpress and Server that causes the error.
From what I read its just a long string that causes the error but how do you fix it if you cant repeat the error locally? Is there any mon "Got Ya's" with Wordpress?
The ponent itself is very straight forward:
<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");
}
}
})
})
I have a Vue ponent in production and a testing environment. In production its within a wordpress theme and I get the 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 pileToFunctions (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)
In testing I just am using a stand alone file and I get not error and the ponent works fine. I assume there is something different within the Wordpress and Server that causes the error.
From what I read its just a long string that causes the error but how do you fix it if you cant repeat the error locally? Is there any mon "Got Ya's" with Wordpress?
The ponent itself is very straight forward:
<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");
}
}
})
})
3 Answers
Reset to default 3The error is misleading. I had a similar issue and found that it's a problem with the inline template. There was a style tag, which was causing the issue in my project. In your case, I think the problem is in the data object. Use string literal in your events data object like this and it should work:
data: {
events: `<?php echo json_encode($another); ?>`,
},
This error was described and solved here: https://github./vuejs/vue/issues/9504
Error in the template generates error in JS due to bug in generateCodeFrame() or repeat$1() (may be fixed in in one way or another).
Another case
In my case, this error was caused because I repeat the same HTML attribute
<div class="awesome wow"
class="anotherawesome">
</div>
This will raise the same issue.
Solution
<div class="awesome wow anotherawesome">
</div>
本文标签： javascriptInvalid string length RangeError in Vue only certain enviromentsStack Overflow
版权声明：本文标题：javascript - Invalid string length RangeError in Vue only certain enviroments - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745624321a2666877.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论