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

Question

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代码:

//html代码:

                

//contextmenu

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

Answer 1

多谢各位的回复,目前这个问题已经解决了,说一下我的解决方法:首先,要知道下vue的主旨思想,他是一个MVVM框架,MVVM的思路是VM驱动V，所以不是将重心放在DOM节点（意味着动词，这是个命令式UI）的操作上，而是一组DOM节点它是否存在于那个地方，由一个VM属性来确定（意味着声明式编程，话说这个是不是应该叫谓词）。然后,我的解决方法是,使用了$nextTick(function () {}),说明如下:另外,vuejs确实应该是自己的一套,再次引入jq去操作,有点违背它的本意,只是项目其他地方用到jq的地方太大,没法一下换掉吧