vue.js:5108 [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. 13 | 14 | </div> 15 | <script> | ^^^^^^^^ 16 | function sendData() { // 发送数据的方法 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 17 | var message = document.getElementById('input1').value; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 18 | // 获取输入框的值 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 19 | document.getElementById('message').innerHTML = message; // 在第二个组件中显示接收到的信息 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 20 | } | ^^^^^^^^^^^^^ 21 | function sendData() { // 发送数据的方法 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 22 | var message = document.getElementById('input2').value; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 23 | // 获取输入框的值 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 24 | document.getElementById('message').innerHTML = message; // 在第二个组件中显示接收到的信息 | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 25 | } | ^^^^^^^^^^^^^ 26 | | 27 | </script> | ^^^^^^^^^^^^^^^^^ 28 | | 29 | </div> | ^^^^^^^^^^ (found in <Root>) warn$2 @ vue.js:5108

这个错误是关于 Vue.js 模板编译的问题，提示模板中不应该包含像 <script> 这样会产生副作用的标记，因为它们不会被解析。同时，模板只应将状态映射到 UI 上。该错误提示中给出的代码片段显示了一些函数，其中使用了 document.getElementById() 等 DOM 操作，这些代码需要移动到组件逻辑中处理。

相关问题

ERROR Failed to compile with 4 errors 20:56:02 [eslint] D:\vuejsqimo\devtools-5.1.1\vue_shop\src\components\HelloWorld.vue 5:1 error The template root requires exactly one element vue/no-multiple-template-root ✖ 1 problem (1 error, 0 warnings) You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. error in ./src/components/HelloWorld.vue?vue&type=template&id=469af010& Module Error (from ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js): (Emitted value instead of an instance of Error) Errors 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.

这个错误是由于一个 Vue 单文件组件（HelloWorld.vue）中的模板根节点包含了多个元素，而 Vue 要求每个模板只能有一个根节点。你需要将模板中的多个根节点包裹在一个父元素中，或将其中一些根节点转换为子元素。另外，模板应该只负责将状态映射到 UI 上，不应该包含任何具有副作用的标签，比如 <script> 标签，因为它们不会被解析。