title: How to separate opening and closing tag by conditional template in vue without getting compiling error?
body: <p>I am trying to do some conditional templating where I have to separated the opening and closing tags of some elements. But can't get it to work until they are in the same conditional template tag. As soon as I put the opening tag to one conditional template and the closing tag to another conditional template I get an error. For example:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;template v-if="show"&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      one
                  &lt;/li&gt;
          &lt;/template&gt;
  
          // OTHER CONDITIONAL STUFF IN BETWEEN
  
          &lt;template v-if="show"&gt;
                  &lt;li&gt;
                      two
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/template&gt;
      &lt;/div&gt;  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data() {
          return {
              show: false
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here I get an error because the opening <code>&lt;ul&gt;</code> tag and closing <code>&lt;/ul&gt;</code> tag are in discrete <code>&lt;template v-if=".."&gt;</code> tags. I get this error:</p>
  
  <pre><code>(Emitted value instead of an instance of Error) 
    Error compiling template:
  
      &lt;div&gt;
  
    &lt;template v-if="show"&gt;
        &lt;ul&gt;
            &lt;li&gt;
                one
            &lt;/li&gt;
    &lt;/template&gt;
  
    &lt;template v-if="show"&gt;
            &lt;li&gt;
                two
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/template&gt;
  
      &lt;/div&gt;  
  
    - tag &lt;ul&gt; has no matching end tag.
  </code></pre>
  
  <p>How can I separate any starting and ending tags inside conditional template tags without breaking the code?  </p>
  
  <hr>
  
  <h2>Edited to add the full code</h2>
  
  <p>This is the routes that I want to use to generate the menu</p>
  
  <pre><code>// 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
  }
  ];
  </code></pre>
  
  <p>This is the parent of the recursive component.</p>
  
  <pre><code>// left-side.vue
  &lt;template&gt;
      &lt;aside class="left-side sidebar-offcanvas"&gt;
          &lt;section class="sidebar"&gt;
              &lt;div id="menu" role="navigation"&gt;
                  &lt;navigation-cmp :routes="routes"&gt;&lt;/navigation-cmp&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/aside&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import navigationCmp from './navigationCmp';
  
  import {routers} from '../../router/routers';
  
  export default {
      name: "left-side",
      computed: {
          routes(){
              return routers;
          }
      },
      components: {
          navigationCmp,
      },
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the recurring part with the problem</p>
  
  <pre><code>// navigationCmp.vue
  &lt;template&gt;
      &lt;ul class="navigation"&gt;
  
          &lt;template v-for="item in routes"&gt;
  
              &lt;template v-if="item.parent == 0"&gt;
                  &lt;template v-if="!!item.children"&gt;
                      &lt;li class="menu-dropdown"&gt;
                          &lt;a href="javascript:void(0)"&gt; 
                              &lt;i class="menu-icon ti-check-box"&gt;&lt;/i&gt; 
                              &lt;span class="mm-text"&gt;{{ item.name }}&lt;/span&gt; 
                              &lt;span class="fa arrow"&gt;&lt;/span&gt; 
                          &lt;/a&gt;
                          &lt;ul class="sub-menu"&gt;
                  &lt;/template&gt;
                  &lt;template v-if="!item.children"&gt;
                      &lt;router-link to="/" tag="li" exact&gt;
                          &lt;a class="logo"&gt;&lt;i class="menu-icon ti-desktop"&gt;&lt;/i&gt;&lt;span class="mm-text"&gt;{{ item.name }}&lt;/span&gt;&lt;/a&gt;
                      &lt;/router-link&gt;                    
                  &lt;/template&gt;
              &lt;/template&gt;
  
              &lt;template v-if="!!item.children" v-for="child in item.children" &gt;
                  &lt;template v-if="!!child.children"&gt;
                      &lt;a href="javascript:void(0)"&gt;
                          &lt;i class="fa fa-fw ti-receipt"&gt;&lt;/i&gt; {{ child.name }}
                          &lt;span class="fa arrow"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;ul class="sub-menu form-submenu"&gt;
                  &lt;/template&gt;
                  &lt;template v-if="!child.cildren"&gt;
                      &lt;router-link tag="li" to="/form-elements" exact&gt;
                          &lt;a class="logo"&gt;&lt;i class="menu-icon ti-cup"&gt;&lt;/i&gt;&lt;span class="mm-text"&gt; {{ child.name }} &lt;/span&gt;&lt;/a&gt;
                      &lt;/router-link&gt;
                  &lt;/template&gt;
  
                  &lt;navigation-cmp v-if='!!child.children&amp;&amp;child.children.length&gt;0' :routes='[child]'&gt; &lt;/navigation-cmp&gt;
  
                  &lt;template v-if="!!child.children"&gt;
                      &lt;/ul&gt;
                  &lt;/template&gt;
  
              &lt;/template&gt;
  
  
              &lt;template v-if="!!item.children&amp;&amp;item.parent==0"&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
              &lt;/template&gt;
  
          &lt;/template&gt;
  
      &lt;/ul&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      name: 'navigation-cmp',
      props: {
          routes: Array,
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <h2>Full error output</h2>
  
  <pre><code>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&amp;index=0!./src/components/layout/navigationCmp.vue
  (Emitted value instead of an instance of Error) 
    Error compiling template:
  
    &lt;ul class="navigation"&gt;
  
        &lt;template v-if="!item.hidden" v-for="item in routes"&gt;
  
            &lt;template v-if="item.parent == 0"&gt;
                &lt;template v-if="show"&gt;
                    &lt;li class="menu-dropdown"&gt;
                        &lt;a href="javascript:void(0)"&gt; 
                            &lt;i class="menu-icon ti-check-box"&gt;&lt;/i&gt; 
                            &lt;span class="mm-text"&gt;{{ item.name }}&lt;/span&gt; 
                            &lt;span class="fa arrow"&gt;&lt;/span&gt; 
                        &lt;/a&gt;
                        &lt;!-- &lt;ul class="sub-menu"&gt; --&gt;
                &lt;/template&gt;
                &lt;template v-if="!item.children"&gt;
                    &lt;router-link to="/" tag="li" exact&gt;
                        &lt;a class="logo"&gt;&lt;i class="menu-icon ti-desktop"&gt;&lt;/i&gt;&lt;span class="mm-text"&gt;{{ item.name }}&lt;/span&gt;&lt;/a&gt;
                    &lt;/router-link&gt;                    
                &lt;/template&gt;
            &lt;/template&gt;
  
                    &lt;/li&gt;
  
  
  
            &lt;!-- &lt;template v-if="!!item.children&amp;&amp;item.parent == 0"&gt; --&gt;
                        &lt;!-- &lt;/ul&gt; --&gt;
            &lt;!-- &lt;/template&gt; --&gt;
  
        &lt;/template&gt;
  
    &lt;/ul&gt;
  
    - tag &lt;li&gt; has no matching end tag.
  
   @ ./src/components/layout/navigationCmp.vue 5:2-192
   @ ./~/babel-loader/lib?cacheDirectory!./~/vue-loader/lib/selector.js?type=script&amp;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&amp;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
  </code></pre>