如何解决当使用转储时，Laravel“ [Vue警告]：编译模板时出错”
我有一个简单的Blade模板。当尝试dump（）PHP数组的内容时，我从Vue收到“错误编译模板”错误。 Laravel版本：7.15。如果我也使用Blade指令@dump，则会发生这种情况。
刀片模板
@extends('layouts.app')
@section('content')
<?php
$cars = [ 'Volvo','BMW','Toyota' ];
dump( $cars );
?>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
Welcome!
</div>
</div>
</div>
</div>
</div>
@endsection
浏览器控制台错误
app.js:37361 [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.
48 |
49 |
50 |
|
51 | <script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'),rxEsc = /([.*+?^${}()|\[\]\/\\])/g,idRx = /\bsf-dump-\d+-ref[012]\w+\b/,keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl',addEventListener = function (e,n,cb) { e.addEventListener(n,cb,false); }; (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle); if (!doc.addEventListener) { addEventListener = function (element,eventName,callback) { element.attachEvent('on' + eventName,function (e) { e.preventDefault = function () {e.returnValue = false;}; e.target = e.srcElement; callback(e); }); }; } function toggle(a,recursive) { var s = a.nextSibling || {},oldClass = s.className,arrow,newClass; if (/\bsf-dump-compact\b/.test(oldClass)) { arrow = '▼'; newClass = 'sf-dump-expanded'; } else if (/\bsf-dump-expanded\b/.test(oldClass)) { arrow = '▶'; newClass = 'sf-dump-compact'; } else { return false; } if (doc.createEvent && s.dispatchEvent) { var event = doc.createEvent('Event'); event.initEvent('sf-dump-expanded' === newClass ? 'sfbeforedumpexpand' : 'sfbeforedumpcollapse',true,false); s.dispatchEvent(event); } a.lastChild.innerHTML = arrow; s.className = s.className.replace(/\bsf-dump-(compact|expanded)\b/,newClass); if (recursive) { try { a = s.querySelectorAll('.'+oldClass); for (s = 0; s < a.length; ++s) { if (-1 == a[s].className.indexOf(newClass)) { a[s].className = newClass; a[s].previousSibling.lastChild.innerHTML = arrow; } } } catch (e) { } } return true; }; function collapse(a,oldClass = s.className; if (/\bsf-dump-expanded\b/.test(oldClass)) { toggle(a,recursive); return true; } return false; }; function expand(a,oldClass = s.className; if (/\bsf-dump-compact\b/.test(oldClass)) { toggle(a,recursive); return true; } return false; }; function collapseAll(root) { var a = root.querySelector('a.sf-dump-toggle'); if (a) { collapse(a,true); expand(a); return true; } return false; } function reveal(node) { var previous,parents = []; while ((node = node.parentNode || {}) && (previous = node.previousSibling) && 'A' === previous.tagName) { parents.push(previous); } if (0 !== parents.length) { parents.forEach(function (parent) { expand(parent); }); return true; } return false; } function highlight(root,activeNode,nodes) { resetHighlightedNodes(root); Array.from(nodes||[]).forEach(function (node) { if (!/\bsf-dump-highlight\b/.test(node.className)) { node.className = node.className + ' sf-dump-highlight'; } }); if (!/\bsf-dump-highlight-active\b/.test(activeNode.className)) { activeNode.className = activeNode.className + ' sf-dump-highlight-active'; } } function resetHighlightedNodes(root) { Array.from(root.querySelectorAll('.sf-dump-str,.sf-dump-key,.sf-dump-public,.sf-dump-protected,.sf-dump-private')).forEach(function (strNode) { strNode.className = strNode.className.replace(/\bsf-dump-highlight\b/,''); strNode.className = strNode.className.replace(/\bsf-dump-highlight-active\b/,''); }); } return function (root,x) { root = doc.getElementById(root); var indentRx = new RegExp('^('+(root.getAttribute('data-indent-pad') || ' ').replace(rxEsc,'\\$1')+')+','m'),options = {"maxDepth":1,"maxStringLength":160,"fileLinkFormat":false},elt = root.getElementsByTagName('A'),len = elt.length,i = 0,s,h,t = []; while (i < len) t.push(elt[i++]); for (i in x) { options[i] = x[i]; } function a(e,f) { addEventListener(root,e,function (e,n) { if ('A' == e.target.tagName) { f(e.target,e); } else if ('A' == e.target.parentNode.tagName) { f(e.target.parentNode,e); } else { n = /\bsf-dump-ellipsis\b/.test(e.target.className) ? e.target.parentNode : e.target; if ((n = n.nextElementSibling) && 'A' == n.tagName) { if (!/\bsf-dump-toggle\b/.test(n.className)) { n = n.nextElementSibling || n; } f(n,true); } } }); }; function isCtrlKey(e) { return e.ctrlKey || e.metaKey; } function xpathString(str) { var parts = str.match(/[^'"]+|['"]/g).map(function (part) { if ("'" == part) { return '"\'"'; } if ('"' == part) { return "'\"'"; } return "'" + part + "'"; }); return "concat(" + parts.join(",") + ",'')"; } function xpathHasClass(className) { return "contains(concat(' ',normalize-space(@class),' '),' " + className +" ')"; } addEventListener(root,'mouseover',function (e) { if ('' != refStyle.innerHTML) { refStyle.innerHTML = ''; } }); a('mouseover',function (a,c) { if (c) { e.target.style.cursor = "pointer"; } else if (a = idRx.exec(a.className)) { try { refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}'; } catch (e) {
warn @ app.js:37361
(anonymous) @ app.js:47465
compileToFunctions @ app.js:47464
Vue.$mount @ app.js:47679
Vue._init @ app.js:41294
Vue @ app.js:41361
./resources/js/app.js @ app.js:47836
__webpack_require__ @ app.js:20
0 @ app.js:47963
__webpack_require__ @ app.js:20
(anonymous) @ app.js:91
(anonymous) @ app.js:93
app.js:37361 [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 <style>,as they will not be parsed.
49 |
50 |
51 | <script> Sfdump = window.Sfdump || (function (doc) { var refStyle = doc.createElement('style'),c) { if (c) { e.target.style.cursor = "pointer"; } else if (a = idRx.exec(a.className)) { try { refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}'; } catch (e) { } } }); a('click',warn @ app.js:37361
(anonymous) @ app.js:47465
compileToFunctions @ app.js:47464
Vue.$mount @ app.js:47679
Vue._init @ app.js:41294
Vue @ app.js:41361
./resources/js/app.js @ app.js:47836
__webpack_require__ @ app.js:20
0 @ app.js:47963
__webpack_require__ @ app.js:20
(anonymous) @ app.js:91
(anonymous) @ app.js:93
app.js:37361 [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,as they will not be parsed.
54 | <span class="sf-dump-index">2</span> => "<span class="sf-dump-str" title="6 characters">Toyota</span>"
55 | </samp>]
56 | </pre><script>Sfdump("sf-dump-1880964245")</script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
57 |
|
58 | <div class="container">
| ^^^^^^^^^^^^^^^^^^^^^^^
59 | <div class="row justify-content-center">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60 | <div class="col-md-8">
| ^^^^^^^^^^^^^^^^^^^^^^^^
61 | <div class="card">
| ^^^^^^^^^^^^^^^^^^^^^
62 | <div class="card-body">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
63 | Welcome!
| ^^^^^^^^^^^^^
64 | </div>
| ^^^^^^^^^^
65 | </div>
| ^^^^^^^^^
66 | </div>
| ^^^^^^^^
67 | </div>
| ^^^^^^^
68 | </div>
| ^^^^^^
69 |
|
70 | </main>
| ^^^^^^^^^
71 | </div>
| ^^^^^^^
如您所见，我没有做任何复杂的事情。为什么在使用dump（）或@dump（）时出现此错误？谢谢。
解决方法
@dump()是Blade指令（按原样使用），同时将其包装在PHP标记中。
根据documentation，这也应该起作用：{{ dump($value) }}。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。