[Vue warn] : Échec de la génération de la fonction de rendu :

Question

J'ai cette étrange erreur que je ne parviens pas à comprendre.

J'utilise la dernière version de VueJS, tirée du CDN officiel avec :

<script src="https://unpkg.com/vue/dist/vue.js"></script>

La ligne spécifiée ressemble à celle ci-dessous :

Quelqu'un en a-t-il fait l'expérience ? S'agit-il d'un VueJS problème ?

Modification ultérieure :

Je crois que l'erreur se situe ici :

    attrs: {
        "type": "text",
        "name": "phone",
        "value": "",
        "id": "phone",
        "phone_number":
    }

le v-bind sur le champ "phone_number" n'a pas fonctionné comme prévu pour une raison quelconque.

Suppression de la :phone_number="phone_number" et je l'ai réécrit, et ça a marché.

Answer 1

Si vous utilisez Laravel et que vous transmettez des données dans un modèle Blade comme celui-ci :

<your-component :value="{{ $myValue }}"></your-component>

Il se peut que $myValue est nulle et l'erreur se produit donc.

Une façon simple de résoudre ce problème est d'utiliser json_encode avant de transmettre des valeurs en tant qu'attribut au composant :

<your-component :value="{{ json_encode($myValue) }}"></your-component>

Answer 2

L'erreur était en fait, comme vous l'avez souligné ici.

attrs: {
    "type": "text",
    "name": "phone",
    "value": "",
    "id": "phone",
    "phone_number":
}

"phone_number" : ici n'est pas défini sur quoi que ce soit, c'est pourquoi Vue s'est emporté et a envoyé une erreur disant que le } était inattendu.

Answer 3

C'est le genre de chose qui rend le codage en script client 10x plus lent que sur le serveur. La question porte sur un problème spécifique, mais une question plus générale est ... comment diable peut-on retrouver une erreur comme celle-ci dans des centaines de lignes de HTML et de JavaScript ?

Dans mon cas, le problème se situait dans cette ligne :

<div class="woBuyCheckoutError">{{ Please correct the errors below for your invoice contact details }}</div>

Vous remarquerez que j'ai bêtement oublié de retirer les crochets {{ }}, Vue a donc pensé qu'il s'agissait d'un appel à une fonction. MVC aurait mis cela en évidence en une nano-seconde, mais je viens de passer une demi-heure à essayer de le retrouver.

Mon conseil : essayez de supprimer ou de commenter de gros morceaux de code jusqu'à ce que vous puissiez trouver un bloc contenant l'erreur de syntaxe, puis rétablissez-les petit à petit jusqu'à ce que vous trouviez le coupable. Bonne chance !