感谢，工具很好！扩展组件，添加vue data变量在html页面报错！

[xujianhua]

根据 demo来改写的， 在根据demo来写的时候也提示变量没有定义。thx.

JS配置：
{
name: "date",
icon: "fa fa-calendar",
i18n: "date",
/* show: true,
init: function (editor) {
console.log("time module init, config is \r\n" + JSON.stringify(this.config))
},*/
/handler: function (editor) {
//editor.execCommand("insertHTML", moment().format(this.config.format || "YYYY-MM-DD HH:mm"))
console.log('handler');
},
destroyed: function (editor) {
console.log("time module destroyed")
}/
//vue component
dashboard: {
template: "#template-date",
data: function () {
return {
colors: [
'#000000', '#33', '#66', '#99', '#003300', '#003333', '#003366',
'#003399', '#006600', '#006633', '#009900', '#330000', '#330033', '#330066',
'#333300', '#333366', '#660000', '#660033', '#663300', '#666600', '#666633',
'#666666', '#666699', '#990000', '#990033', '#9900CC', '#996600', '#FFCC00',
'#FFCCCC', '#FFCC99', '#FFFF00', '#FF9900', '#CCFFCC', '#CCFFFF', '#CCFF99'
]
}
},
methods: {
changeColor(color){
this.$parent.execCommand(this.command, color)
}
},
created(){
debugger;
const config = this.$options.module.config
// font name
if (!config) {
return
}
if (Array.isArray(config.fontNames)) {
this.nameList = config.fontNames
}
}
}
}

前台页面：

<script type="text/x-template" id="template-date">

</script>

报错信息：
[Vue warn]: Error compiling template:

 		<div v-for="color in colors" :style="{'background-color':color}" class="color-card" @click="changeColor(color)">
    	</div>

• Cannot use v-for on stateful component root element because it renders multiple elements.

found in

--->

at D:\Project\JAVA\ddyFront\src\components\target\add.vue
at D:\Project\JAVA\ddyFront\src\App.vue

[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

found in

--->

at D:\Project\JAVA\ddyFront\src\components\target\add.vue
at D:\Project\JAVA\ddyFront\src\App.vue