vue.js - 如何在vue中通过条件模板分离开始和结束标签而不出现编译错误？

Question

我正在尝试做一些条件模板，其中我必须分隔某些元素的开始和结束标签。但只有在它们位于相同的条件模板标记中时才能使其工作。一旦我将开始标签放入一个条件模板并将结束标签放入另一个条件模板，我就会收到错误。例如:

<template>
    <div>
        <template v-if="show">
            <ul>
                <li>
                    one
                </li>
        </template>

        // OTHER CONDITIONAL STUFF IN BETWEEN

        <template v-if="show">
                <li>
                    two
                </li>
            </ul>
        </template>
    </div>  
</template>

<script>
export default {
    data() {
        return {
            show: false
        }
    }
}
</script>

这里我收到一个错误，因为开头 <ul>标签和关闭 </ul>标签是离散的 <template v-if="..">标签。我收到此错误:

(Emitted value instead of an instance of Error) 
  Error compiling template:

    <div>

  <template v-if="show">
      <ul>
          <li>
              one
          </li>
  </template>

  <template v-if="show">
          <li>
              two
          </li>
      </ul>
  </template>

    </div>  

  - tag <ul> has no matching end tag.

如何在不破坏代码的情况下分离条件模板标记内的任何开始和结束标记？

<小时/>

编辑以添加完整代码

这是我想用来生成菜单的路线

// 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
}
];

这是递归组件的父组件。

// 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 from './navigationCmp';

import {routers} from '../../router/routers';

export default {
    name: "left-side",
    computed: {
        routes(){
            return routers;
        }
    },
    components: {
        navigationCmp,
    },
}
</script>

这是问题重复出现的部分

// 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>

<小时/>

完整错误输出

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 an 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

Answer 1

这实际上对我来说效果很好。使用模板是规避合法 HTML 限制的推荐方法。你能制作一个展示问题的片段吗？并说明您在哪个平台上运行它，以防万一它依赖于平台？

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>