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

Question

当我尝试仅使用一个Vue.js组件编译Laravel页面时，出现此错误。

我发现的是，错误必须是此行或其返回内容的原因：

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

一旦我删除$ snippet-> short_snippet，它就不会有问题。

在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>)

谢谢您的帮助。

Answer 1

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

类似这样的东西：

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

您可能必须尝试在v-html块中使用转义的引号，但是希望您能理解一般的想法。