javascript - vue渲染左边菜单栏，点击会出现二级菜单，渲染不成功

问题描述

问 题

1描述问题：
我现在想实现的是左边菜单栏，点击其中的主菜单会出现几个二级菜单。主菜单会有几个。后台传递的json数据是数组，数据内部的成员是对象，对象还是数组，类似这样的结构：

我现在想渲染在左边菜单栏中。

2我的代码：

<ul id="js_left_menu" class="set-menu-ul">
     <li class="true ex" v-for="liiterm in liiterms">
        <a href="javascript:void(0)" class="fz20 left-header first_A"><i class="pic pic_14"></i>{{liiterm.name}}</a>
           <ul class="menu-ul-ul" id="menu_list_ul">
               <my-item :didi="liiterm.items"></my-item>
               <template v-for="sonitem in didi" id="menuUlLi">
                        <li v-if="{{$index==0}}" class="first-li">
                            <span class="button top_docu switch"></span><a href={{sonitem.pageUrl}}>{{sonitem.name}}</a>
                       </li>
                     <template v-else>
                     <li v-if="{{$index==item.items.length-1}}" class="last-li">
                           <span class="button bottom_docu switch></span><a href={{sonitem.pageUrl}}>{{sonitem.name}}</a>
                     </li>
                     <li v-else>
                           <span class="button center_docu switch"></span><a href={{sonitem.pageUrl}}>{{sonitem.name}}</a>
                     </li>
                   </template>
                </template>
            </ul>
       </li>
 </ul>

js代码：

    var Child = Vue.extend({
        props:['didi'],
        template: '#menuUlLi',
        data:function(){
            return{
                didi:this.didi
            }
        }
    })
    
    var bar = new Vue({
        el:'#app',
        data:{
            liiterms:[]
        },
        components:{
            myItem:Child
        },
        created:function(){
            this.setmenu();
        },
        methods:{
            setmenu:function(){
                this.$http({url:'leftDir/getDirTree',
                    params:{
                        token:cookie.get("token")
                    },
                    headers:{Authorization:'Basic Yxsdlfjui'}})
                        .then(function(response){
                            console.log(response.data.body);
                            if(response.data.code=="0001"){
                                this.liiterms = response.data.body;
                            }
                        },function(){

                        })
            }
        }
    });

3报错信息：

不知道是什么问题造成的？本人初学vue，希望大神指点。

解决方案

v-if是指令，直接写JS变量就好； $index在2.0中已经移除了。

v-if="{{$index==0}}"
// 改成
v-if="index === 0"

这篇关于javascript - vue渲染左边菜单栏，点击会出现二级菜单，渲染不成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！