【异常-Vue-HBuilder】写的vue的template里面的多个div只显示了一个

问题

在template中写了三个div却只显式一个

错误代码

var CartList = { template: ` <div class="list"> <img src="img/integral.png"> <button type="button">-</button> <input type="text"> <button type="button">+</button> <button type="button">x</button> </div> <div class="list"> <img src="img/integral.png"> <button type="button">-</button> <input type="text"> <button type="button">+</button> <button type="button">x</button> </div> <div class="list"> <img src="img/integral.png"> <button type="button">-</button> <input type="text"> <button type="button">+</button> <button type="button">x</button> </div> `, };

原因

出现多个同级元素应该用一个父级元素包裹起来。

解决

在三个div的外层再套一个div即可。

正确代码

var CartList = { template: `, <div> <div class="list"> <img src="img/integral.png"> <button type="button">-</button> <input type="text"> <button type="button">+</button> <button type="button">x</button> </div> <div class="list"> <img src="img/integral.png"> <button type="button">-</button> <input type="text"> <button type="button">+</button> <button type="button">x</button> </div> <div class="list"> <img src="img/integral.png"> <button type="button">-</button> <input type="text"> <button type="button">+</button> <button type="button">x</button> </div> </div> `, };