[Vue 警告]：无法生成渲染函数：答案

【问题标题】：[Vue warn]: Failed to generate render function:[Vue 警告]：无法生成渲染函数：
【发布时间】：2017-03-13 17:55:14
【问题描述】：

我有一个奇怪的错误，我无法弄清楚。

我正在使用最新的 VueJS，从官方 CDN 中提取：

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

指定的行如下所示：

有人经历过吗？是VueJS 的问题吗？

后期编辑：

我相信错误就在这里：

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

“phone_number”字段上的 v-bind 由于某种原因没有按预期工作。

把:phone_number="phone_number"删了，又写了一遍，果然奏效了。

【问题讨论】：

标签： vue.js

【解决方案1】：

错误实际上正如你指出的那样

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

“phone_number”：这里没有设置任何东西，这就是为什么 Vue 发出错误的声音并指出 } 是意外的。

【讨论】：

我也遇到了同样的问题，还是没搞清楚，试了很多东西还是没有，也许你再拍一张！？
好吧，对于这个问题的上下文，这是电话号码没有任何价值的问题，如果您有类似的问题无法弄清楚，您可能应该问一个新的问题并包含您的代码，以便其他人可以实际帮助您。
感谢@OmarTarek，我解决了我的问题，所以对于未来，我的错误在于我的 Laravel Blade 模板在三元运算符中传递了 null。是:available-salespeople="{{$forecourt ? collect($forecourt->salespeopleSelect) : null }}" 修复我滴滴否则返回一个空对象:available-salespeople="{{$forecourt ? collect($forecourt->salespeopleSelect) : json_encode([])}}"

【解决方案2】：

如果你使用 Laravel 并且你正在像这样的 Blade 模板中传递数据：

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

可能是$myValue为空，因此出现错误。

解决此问题的一种简单方法是在将值作为属性传递给组件之前使用json_encode：

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

【讨论】：

谢谢！我自己只想传递字符串，所以只需从道具中删除冒号即可完成工作。
如果你使用 laravel 包 renatomarinho/laravel-page-speed，只需从 kernel 中删除 RenatoMarinho\LaravelPageSpeed\Middleware\InlineCss::class
在我的情况下，它是使用刀片模板中的命名槽传递的 JavaScript 变量：在 Chrome 中这是可以接受的，但在 IE11 中它触发了错误。 <template v-slot:validationTrigger="{ validate, validationError }">...</template>

【解决方案3】：

这使得在客户端脚本中的编码比在服务器上慢 10 倍。问题是针对一个特定问题，但更一般的问题是……您到底如何在数百行 HTML 和 JavaScript 中追踪这样的错误？

就我而言，问题出在这一行：

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

你会注意到我愚蠢地忘记删除 {{ }} 括号，所以 Vue 认为这是对函数的调用。 MVC 会在一纳秒内突出显示这一点，但我只花了半个小时试图追踪它。

我的建议：尝试删除或注释掉大块代码，直到找到包含语法错误的块，然后一点一点恢复它们，直到找到罪魁祸首。祝你好运！

【讨论】：