Component template should contain exactly one root element

在vue中报错:

 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead

报错的大致意思是:组件的模板应该只能包含一个根元素,也就是是说作为元素的直系儿子的元素只能有一个。报错的goods.vue中的中的内容如下图所示:
在这里插入图片描述

在该<template>下,有两个直系子元素<div class="goods"><food>,所以在浏览器就报错:
Component template should contain exactly one root element
解决的方法是用一个div将元素<div class="goods"><food>包裹起来,如下图所示,浏览器就不会报错了

在这里插入图片描述

自己的代码用到的 加了我圈的 div

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/10278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【每日一题】—— C - (K+1)-th Largest Number (AtCoder Beginner Contest 273)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…

【计算机网络 01】说在前面 信息服务 因特网 ISP RFC技术文档 边缘与核心 交换方式 定义与分类 网络性能指标 计算机网络体系结构 章节小结

第一章--概述 说在前面1.1 计算机网络 信息时代作用1.2 因特网概述1.3 三种交换方式1.4 计算机网络 定义与分类1.5 计算机网络的性能指标1.6 计算机网络体系结构1 常见的计算机网络体系结构2 计算机网络体系结构分层的必要性3 计算机网络体系结构分层思想举例4 计算机网络体系结…

理解JavaScript 的发布者/订阅者模式

什么是发布者/订阅者模式 发布者-订阅者模式是一种软件设计模式&#xff0c;用于实现对象之间的一对多依赖关系。在这种模式中&#xff0c;一个对象&#xff08;被称为发布者&#xff09;而其他对象&#xff08;成为订阅者&#xff09;可以在发布者上注册自己&#xff0c;以接…

本地文件夹上传到Github

本地文件夹上传到Github 步骤1. 下载git步骤2. 在github中新建一个库&#xff08;Repository&#xff09;步骤3. 设置SSH key步骤4. 添加SSH keys步骤5. 本地文件上传到github参考 步骤1. 下载git 下载git客户端&#xff0c;并在本地安装完成。 步骤2. 在github中新建一个库&a…

Install Ansible on CentOS 8

环境准备&#xff1a; 1.至少俩台linux主机&#xff0c;一台是控制节点&#xff0c;一台是受控节点 2.控制节点和受控节点都需要安装Python36 3.控制节点需要安装ansible 4.控制节点需要获得受控节点的普通用户或root用户的权限&#xff0c;控制节点需要ssh客户端&#xff0c;…

HTTPS工作原理

先简述一下什么是HTTPS&#xff0c;HTTPS就是在HTTP的基础上增加了SSL/TLS来完成加密传输&#xff0c;以免敏感信息被第三方获取&#xff0c;所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。 一、客户端发起HTTPS请求 这个没什么好说的&#xff0c;就是…

windows和linux中查找文档中的特定字符

一、windows上&#xff0c;使用find命令。 语法&#xff1a;findstr [参数] [字符串] [磁盘&#xff1a;[目录]文件] findstr [/v] [/n] [/i] [/offline] “string” [[drive:][path]filename[ …]] 参数说明&#xff1a; /b 如果位于行的开头则匹配模式。 /e …

lil_matrix()

看代码的时候遇到的&#xff0c;简单记录记录一下。 这是一种用于逐步构建稀疏矩阵的结构&#xff08;官方文档中写的&#xff09;&#xff0c;换句话说这是一种存储稀疏矩阵的方式。该稀疏矩阵通过两个list存储&#xff1a; rows [list([ ]) list([ ]) list([ ]) ... list(…

【C#】类的赋值是引用

在C#中&#xff0c;类的赋值是将一个类的实例赋给另一个类的实例或者将一个类的实例赋给一个变量。 例如&#xff0c;假设有一个名为Person的类&#xff1a; csharp public class Person { public string Name { get; set; } public int Age { get; set; } } 然后可以创建两个…

[JavaScript游戏开发] 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测

系列文章目录 第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测 文章目录 系列文章目录前言一、本章节效果图二、介绍2.1、准备地图素材2.2、封装地图上…

[OnWork.Tools]系列 01-简介

说明 OnWork.Tools 是基于 Net6 的桌面程序。支持Windows7SP1及以上系统&#xff0c;主要是日常办公或者是开发工作过程中常用的工具集合。界面使用WPF Mvvm模式开发&#xff0c;目的是将开源项目中&#xff0c;好用的项目集成到一起&#xff0c;方便大家使用和学习。 功能 …

React:从 npx开始

使用 npm 来创建第一个 recat 文件&#xff08; react-demo 是文件名&#xff0c;可以自定义&#xff09; npx create-react-app react-demo npx是 npm v5.2 版本新添加的命令&#xff0c;用来简化 npm 中工具包的使用 原始&#xff1a; 全局安装npm i -g create-react-app 2 …

thinkphp 用户登录记录日记

<?phpnamespace app\api\model;use think\Model;class OperateLog extends Model {// 唯一键protected $pk id;protected $table operate_log;public static function log($data){return self::create($data, true);} }model <?phpnamespace app\admin\model;use ap…

ChatGPT漫谈(二)

ChatGPT“脱胎”于OpenAI在2020年发布的GPT-3,任何外行都可以使用GPT-3,在几分钟内提供示例,并获得所需的文本输出。GPT-3被认为是当时最强大的语言模型,但现在,ChatGPT模型似乎更强大。ChatGPT能进行天马行空的长对话,可以回答问题,它具备了类人的逻辑、思考与沟通的能…

【Matter】基于Ubuntu 22.04 编译chip-tool工具

前言 编译过程有点曲折&#xff0c;做下记录&#xff0c;过程中&#xff0c;有参考别人写的博客&#xff0c;也看github 官方介绍&#xff0c;终于跑通了~ 环境说明&#xff1a; 首先需要稳定的梯子&#xff0c;可以访问“外网”ubuntu 环境&#xff0c;最终成功实验在Ubunt…

组合API

组合API 1. 为什么要引入组合API2. setup()函数3. 响应式API3.1 reactive和watchEffect3.2 ref3.3 readonly3.5 watch 4. 生命周期钩子5. 依赖注入6. 逻辑提取和重用7. 小结 1. 为什么要引入组合API 组合API是Vue 3中引入的一种新的编程模式&#xff0c;它将组件的逻辑分散到多…

Linux 下centos 查看 -std 是否支持 C17

实际工作中&#xff0c;可能会遇到c的一些高级特性&#xff0c;例如std::invoke&#xff0c;此函数是c17才引入的&#xff0c;如何判断当前的gcc是否支持c17呢&#xff0c;这里提供两种办法。 1.根据gcc的版本号来推断 gcc --version&#xff0c;可以查看版本号&#xff0c;笔者…

数据结构【线性表】

数据结构入门级 第二章 线性表 一、线性表的定义和基本操作 线性表的定义&#xff1a;具有相同属性数据类型的数据元素组成的一个有限序列&#xff1b;除第一个元素外的元素都有直接前驱&#xff0c;除最后一个元素外的元素都有直接后继&#xff1b;存在一个唯一被称为“第一个…

从简单线性回归到TensorFlow深度学习

大家好&#xff0c;人工智能近年来变得越来越流行&#xff0c;学习人工智能的需求也随之增加&#xff0c;尤其是许多IT专业人士希望利用机器学习的强大功能&#xff0c;但面临不小的挑战&#xff0c;尤其是在理论和数学上。 步骤1&#xff1a;线性回归 线性回归是一种统计学中…

lucene、solr、es的区别以及应用场景

目录 1. Lucene:2. Solr:3. Elasticsearch: Lucene、Solr 和 Elasticsearch(ES) 都是基于 Lucene 引擎的搜索引擎&#xff0c;它们之间有相似之处&#xff0c;但也有一些不同之处。 Lucene 是一个低级别的搜索引擎库&#xff0c;它提供了一种用于创建和维护全文索引的 API&…