J'ai un composant Vue en production et un environnement de test. En production, c'est dans un thème wordpress et j'obtiens l'erreur:
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");
}
}
})
})
Lors des tests, j'utilise juste un fichier autonome et je n'obtiens pas d'erreur et le composant fonctionne bien. Je suppose qu'il y a quelque chose de différent dans Wordpress et Server qui provoque l'erreur.
D'après ce que j'ai lu, c'est juste une longue chaîne qui cause l'erreur, mais comment la corriger si vous ne pouvez pas répéter l'erreur localement? Existe-t-il des "Got Ya's" communs avec Wordpress?
Le composant lui-même est très 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.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)
3 Réponses :
L'erreur est trompeuse. J'ai eu un problème similaire et j'ai trouvé que c'était un problème avec le modèle en ligne. Il y avait une balise de style, qui causait le problème dans mon projet. Dans votre cas, je pense que le problème réside dans l'objet de données. Utilisez une chaîne littérale dans votre objet de données d'événements comme ceci et cela devrait fonctionner:
data: {
events: `<?php echo json_encode($another); ?>`,
},
Merci, cette erreur est très trompeuse. Et il semble difficile de trouver la cause.
Cette erreur a été décrite et résolue ici: https://github.com/vuejs/vue / issues / 9504
Une erreur dans le modèle génère une erreur dans JS en raison d'un bogue dans generateCodeFrame () ou répétez $ 1 () (peut être corrigé d'une manière ou d'une autre).
Dans mon cas, cette erreur est due au fait que je répète le même attribut HTML
<div class="awesome wow anotherawesome"> </div>
Cela soulèvera le même problème.
Solution
<div class="awesome wow"
class="anotherawesome">
</div>