vue.js - How to separate opening and closing tag by conditional template in vue without getting compiling error? -
i trying conditional templating have separated opening , closing tags of elements. can't work until in same conditional template tag. put opening tag 1 conditional template , closing tag conditional template error. example:
<template> <div> <template v-if="show"> <ul> <li> 1 </li> </template> // other conditional stuff in between <template v-if="show"> <li> 2 </li> </ul> </template> </div> </template> <script> export default { data() { return { show: false } } } </script> here error because opening <ul> tag , closing </ul> tag in discrete <template v-if=".."> tags. error:
(emitted value instead of instance of error) error compiling template: <div> <template v-if="show"> <ul> <li> 1 </li> </template> <template v-if="show"> <li> 2 </li> </ul> </template> </div> - tag <ul> has no matching end tag. how can separate starting , ending tags inside conditional template tags without breaking code?
edited add full code
this routes want use generate menu
// routers.js export let routers = [ { name: 'main menu 1', parent: 0, }, { name: 'main menu 2', parent: 0 children: [ { name: 'menu item 1-1' },{ name: 'menu item 1-2', children: [ { name: 'menu item 2-1', },{ name: 'menu item 2-2', },{ name: 'menu item 2-3', children: [{ name: 'shit' }] } ] } ] }, { name: 'main menu 3', parent: 0 } ]; this parent of recursive component.
// left-side.vue <template> <aside class="left-side sidebar-offcanvas"> <section class="sidebar"> <div id="menu" role="navigation"> <navigation-cmp :routes="routes"></navigation-cmp> </div> </section> </aside> </template> <script> import navigationcmp './navigationcmp'; import {routers} '../../router/routers'; export default { name: "left-side", computed: { routes(){ return routers; } }, components: { navigationcmp, }, } </script> this recurring part problem
// navigationcmp.vue <template> <ul class="navigation"> <template v-for="item in routes"> <template v-if="item.parent == 0"> <template v-if="!!item.children"> <li class="menu-dropdown"> <a href="javascript:void(0)"> <i class="menu-icon ti-check-box"></i> <span class="mm-text">{{ item.name }}</span> <span class="fa arrow"></span> </a> <ul class="sub-menu"> </template> <template v-if="!item.children"> <router-link to="/" tag="li" exact> <a class="logo"><i class="menu-icon ti-desktop"></i><span class="mm-text">{{ item.name }}</span></a> </router-link> </template> </template> <template v-if="!!item.children" v-for="child in item.children" > <template v-if="!!child.children"> <a href="javascript:void(0)"> <i class="fa fa-fw ti-receipt"></i> {{ child.name }} <span class="fa arrow"></span> </a> <ul class="sub-menu form-submenu"> </template> <template v-if="!child.cildren"> <router-link tag="li" to="/form-elements" exact> <a class="logo"><i class="menu-icon ti-cup"></i><span class="mm-text"> {{ child.name }} </span></a> </router-link> </template> <navigation-cmp v-if='!!child.children&&child.children.length>0' :routes='[child]'> </navigation-cmp> <template v-if="!!child.children"> </ul> </template> </template> <template v-if="!!item.children&&item.parent==0"> </ul> </li> </template> </template> </ul> </template> <script> export default { name: 'navigation-cmp', props: { routes: array, } } </script> full error output
main.js:43552 [wds] errors while compiling. reload prevented. main.js:43558 ./~/vue-loader/lib/template-compiler?{"id":"data-v-dfd6e000"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/layout/navigationcmp.vue (emitted value instead of instance of error) error compiling template: <ul class="navigation"> <template v-if="!item.hidden" v-for="item in routes"> <template v-if="item.parent == 0"> <template v-if="show"> <li class="menu-dropdown"> <a href="javascript:void(0)"> <i class="menu-icon ti-check-box"></i> <span class="mm-text">{{ item.name }}</span> <span class="fa arrow"></span> </a> <!-- <ul class="sub-menu"> --> </template> <template v-if="!item.children"> <router-link to="/" tag="li" exact> <a class="logo"><i class="menu-icon ti-desktop"></i><span class="mm-text">{{ item.name }}</span></a> </router-link> </template> </template> </li> <!-- <template v-if="!!item.children&&item.parent == 0"> --> <!-- </ul> --> <!-- </template> --> </template> </ul> - tag <li> has no matching end tag. @ ./src/components/layout/navigationcmp.vue 5:2-192 @ ./~/babel-loader/lib?cachedirectory!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/layout/left-side.vue @ ./src/components/layout/left-side.vue @ ./~/babel-loader/lib?cachedirectory!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/layout/layout.vue @ ./src/components/layout/layout.vue @ ./src/router/routes.js @ ./src/router/router.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js errors @ main.js:43558 sock.onmessage @ main.js:43801 ./node_modules/sockjs-client/lib/event/eventtarget.js.eventtarget.dispatchevent @ main.js:22579 (anonymous) @ main.js:23332 ./node_modules/sockjs-client/lib/main.js.sockjs._transportmessage @ main.js:23330 ./node_modules/sockjs-client/lib/event/emitter.js.eventemitter.emit @ main.js:22483 websockettransport.ws.onmessage
this works fine me. using templates recommended way of circumventing legal-html restrictions. can make snippet exhibits problem? , on platform you're running it, in case it's platform-dependent?
var spec = { template: '#nav-template', props: { routes: array, } }; new vue({ el: '#app', data: { routes: [{ parent: 0, children: 1, name: 'first' }, { parent: 1, children: 0, name: 'second' }] }, components: { navigationcmp: spec } });<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> // navigationcmp.vue <div id="app"> <aside class="left-side sidebar-offcanvas"> <section class="sidebar"> <div id="menu" role="navigation"> <navigation-cmp :routes="routes"></navigation-cmp> </div> </section> </aside> </div> <template id="nav-template"> <ul class=" navigation "> <template v-for="item in routes "> <template v-if="item.parent==0 "> <template v-if="!!item.children "> <li class="menu-dropdown "> <a href="javascript:void(0) "> <i class="menu-icon ti-check-box "></i> <span class="mm-text ">{{ item.name }}</span> <span class="fa arrow "></span> </a> <ul class="sub-menu "> </template> <template v-if="!item.children "> <router-link to="/ " tag="li " exact> <a class="logo "><i class="menu-icon ti-desktop "></i><span class="mm-text ">{{ item.name }}</span></a> </router-link> </template> </template> <template v-if="!!item.children " v-for="child in item.children "> <template v-if="!!child.children "> <a href="javascript:void(0) "> <i class="fa fa-fw ti-receipt "></i> {{ child.name }} <span class="fa arrow "></span> </a> <ul class="sub-menu form-submenu "> </template> <template v-if="!child.cildren "> <router-link tag="li " to="/form-elements " exact> <a class="logo "><i class="menu-icon ti-cup "></i><span class="mm-text "> {{ child.name }} </span></a> </router-link> </template> <navigation-cmp v-if='!!child.children&&child.children.length>0' :routes='[child]'> </navigation-cmp> <template v-if="!!child.children "> </ul> </template> </template> <template v-if="!!item.children&&item.parent==0 "> </ul> </li> </template> </template> </ul> </template>
Comments
Post a Comment