今天学习vm遇到的错误,root标签不能用v-for

来源：互联网发布：经纬之创网络编辑：程序博客网时间：2024/06/15 16:24

遇到错误:Cannot use v-for on stateful component root element because it renders multiple elements.

代码如下:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    div {      width: 200px;      height: 200px;      border: 1px solid black;    }  </style></head><body><div id="example" v-for="val in evenNumbers">{{ val }}</div><script src="js/vue.js"></script><script>  var vm = new Vue({      el: '#example',      data: {        numbers: [1, 12, 7, 8, 9, 1, 8, 10],        hash: [],        arr: []      },      computed: {        evenNumbers: function () {          return this.numbers.filter(function (number) {            return number % 2 === 0          })        }      },      methods: {        even: function (numbers) {          return numbers.filter(function (number) {            return number % 2 === 0          })        }      }    })    ;</script></body></html>

上网查了一圈。终于知道了原因。大致意思就是 v-for不能用于根元素（root element）。因为v-for是个循环，它返回更多的元素。导致无法渲染。

应该改为:

<div id="example">  <div v-for="val in evenNumbers">{{ val }}</div></div>

这样就没问题了

0 0