javascript - 求大神分享一个通过vue.js实现的点击鼠标右键,生产菜单列表的demo或思路,谢谢~-PHP中文网问答

1.使用到vue.js;
2.考虑到dom操作,可以引入jquery;
3.可以考虑结合jquery插件,比如bootstrap-menu实现该效果;
4.需要有正常的右键展开菜单,再点击菜单外区域能隐藏;
5.需要与其他vue语句结合使用无冲突,比如v-for等;
6.如果有现成的或值得参考的,也可以分享下地址.

另外我再阐述下我在实现一个类似需求中遇到几个问题:
1.用vue渲染出列表不是问题很正常,但不太清楚为什么我对生vue列表渲染的li元素用jquery选择器得到的返回结果的length为0,明明页面上都显示有3个了;
2.我尝试在vue的生命周期created,ready等console.log($('#testList li')),结果created的返回有结果,ready的没有,感觉很神奇,是不是我对vue的生命周期理解不对?不是ready的时候已经写进了document吗?
3.无论console.log的结果如何,当我结合bootstrap-menu这个插件,比如这么写:
//js代码:

var commentListVue = new Vue({
    el: '#historyNewsList',
    data: {
        items: [],  //这个是有值的,赋值的那部分代码就不贴了
        theme: '',
        newItems:[] //这个是有值的,赋值的那部分代码就不贴了
    },
    ready: function () {
        console.log( $('#historyNewsList li.live'));
        $('#historyNewsList li.live').contextmenu({
            target: '#liveForCAreaRightMenu',
            onItem: function (context, e) {

            }
        });
    }
});

//html代码:

                    
                        {{{ item.tag=='0'?'':item.tag }}}
                        {{ item.content }}
                        {{ item.update_datetime }}

//contextmenu

如上,contextmenu方法并未生效,感觉没有调用过,why?如果需要结合vue,我该怎么写,才能让列表渲染生产的每个li能通过右键生产菜单?