[Vue 警告]：编译模板时出错：无效表达式：意外令牌 >答案

【问题标题】：[Vue warn]: Error compiling template: invalid expression: Unexpected token >[Vue 警告]：编译模板时出错：无效表达式：意外令牌 >
【发布时间】：2019-07-17 16:23:25
【问题描述】：

当我尝试编译只有一个 Vue.js 组件的 Laravel-Page 时出现此错误。

我发现错误必须与此行或返回的内容有关：

<a href="{{route('sites.showSnippet', $snippet->id)}}">
              <pre><code class="language-{{isset($langs[0]) ? $langs[0]->language_name : ''}}">{{$snippet->short_snippet}}</code></pre> 
            </a>

一旦我删除 $sn-p->short_sn-p 它就可以正常工作。

在 IMG 中，您可以看到它返回的内容

这是完整的错误日志：

app.js:17685 [Vue warn]: Error compiling template:

invalid expression: Unexpected token > in

    "<p><a href=\""+_s(route('searchTag', $tags))+"\" title=\"search for "+_s($tags)+"\"> "+_s($tags)+"</a></p>\n\t\t@endif\n\t</div>\n\t@endif\n\t<copy snippetid=\""+_s($snippet->id)+"\"></copy>\n\t<div class=\"tooltip tooltip_views\">\n      <span class=\"tooltiptext\">Views</span>\n    <"

  Raw expression: <p><a href="{{route('searchTag', $tags)}}" title="search for {{$tags}}"> {{$tags}}</a></p>
        @endif
    </div>
    @endif
    <copy snippetid="{{$snippet->id}}"></copy>
    <div class="tooltip tooltip_views">
      <span class="tooltiptext">Views</span>
    <


91 |            <small>test@test.com, 2019-07-17</small>
92 |              <a href="http://codesnippet.local/snippet/3">
93 |                <pre><code class="language-">&lt;p&gt;&lt;a href="{{route('searchTag', $tags)}}" title="search for {{$tags}}"&gt; {{$tags}}&lt;/a&gt;&lt;/p&gt;
   |                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
94 |        @endif
   |  ^^^^^^^^
95 |    &lt;/div&gt;
   |  ^^^^^^^^^^^^^
96 |    @endif
   |  ^^^^^^^
97 |    &lt;copy snippetid="{{$snippet-&gt;id}}"&gt;&lt;/copy&gt;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
98 |    &lt;div class="tooltip tooltip_views"&gt;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
99 |        &lt;span class="tooltiptext"&gt;Views&lt;/span&gt;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
100|      &lt;</code></pre> 
   |  ^^^^^^^^

(found in <Root>)

提前感谢您的帮助。

【问题讨论】：

我了解到 vuejs 尝试从预代码编译代码。只要 $sn-p->short_sn-p 有 Code inside vue 就会尝试编译它。

标签： laravel vue.js compiler-errors vue-component

【解决方案1】：

您的 short_sn-p 正在转义 HTML。请改用v-html 指令。

类似这样的：

<code 
 class="language-{{isset($langs[0]) ? $langs[0]->language_name : ''}}" 
 v-html='$snippet->short_snippet'
>
</code>

您可能必须尝试在v-html 块中转义另一个引号，但希望您能大致了解。

【讨论】：