Question

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

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

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

指定的行如下所示：

有没有人经历过这个？这是VueJS问题吗？

稍后编辑：

我相信错误在这里：

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

＆＃34; phone_number＆＃34;上的v-bind由于某种原因，该字段没有按预期工作。

删除了:phone_number="phone_number"并再次写了它，它才奏效。

Answer 1

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

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

$myValue可能为空，因此会发生错误。

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

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

Answer 2

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

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

＆＃34; phone_number＆＃34;：这里没有设置任何东西，这就是为什么Vue蹲了起来并且犯了一个错误，说明}是意外的。

Answer 3

这种情况会使客户端脚本中的编码比服务器上的编码慢10倍。这个问题是在问一个特定的问题，但是更普遍的问题是……您究竟如何在数百行HTML和JavaScript中跟踪这样的错误？

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

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

您会发现我愚蠢地忘记了删除{{}}括号，因此Vue认为这是对函数的调用。 MVC会在一纳秒之内突出显示这一点，但是我只花了半个小时就试图对其进行跟踪。

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