laravel - 尝试将 chart.js 与 Laravel-charts 包一起使用时 Laravel Vue 错误

Question

我正在使用来自https://charts.erik.cat/的 Laravel 图表，我注意到我收到了以下错误。

我还注意到，当我删除此行时错误消失了（与我在生成内容之前放置在布局中的渲染有关）：但是当我这样做时，图表不起作用。

{!! $chart->script() !!}

在我放置的内容中：

{!! $chart->container() !!}

我猜app.js有一些冲突吗？

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

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

191|  
192|          </main>
193|                    <script type="text/javascript">
   |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
194|      var ctvChart = document.getElementById('mzaqnvhkcsrjgeoxdwuipybtl').getContext('2d');
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
195|      function mzaqnvhkcsrjgeoxdwuipybtl_create(data) {
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
196|          mzaqnvhkcsrjgeoxdwuipybtl_rendered = true;
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
197|          document.getElementById("mzaqnvhkcsrjgeoxdwuipybtl_loader").style.display = 'none';
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
198|          document.getElementById("mzaqnvhkcsrjgeoxdwuipybtl").style.display = 'block';
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
199|          window.mzaqnvhkcsrjgeoxdwuipybtl = new Chart(document.getElementById("mzaqnvhkcsrjgeoxdwuipybtl").getContext("2d"), {
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.
.
.(...there is more)

标签： laravelvue.jschart.js

Answer 1

我通过移动来修复它

{!! $chart->script() !!}

在布局中的标签之外。我不确定为什么，但它不再显示该警告。