Vue2.0中使用v-el,v-rel出现问题

问题描述

在高仿饿了么实战项目中使用v-el指令获取DOM，但出现下图的错误：

v-el指令

代码

template

template

script

script

问题原因：

在Vue2.0中弃用了v-el,v-rel指令

解决方案：

使用ref属性为元素或组件添加标记，然后通过this.$refs获取

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例；

官网讲解：https://cn.vuejs.org/v2/api/#ref

使用rel="menu-wrapper"和rel="food-wrapper"以及this.$els替换为this.$refs后出现下图问题：

找不到dom

问题起因：

命名规范问题；

解决方案

需要将ref="menu-wrapper"和ref="food-wrapper"改为驼峰命名，即是：

rel="menuWrapper"和ref="foodWrapper"

修改后代码：

template script