尝试在Laravel-charts包中使用chart.js时出现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)

Answer 1

我通过移动将其固定