refs[this.letter]为undefined，是什么原因？

Question

执行watch：部分，取不到城市列表 list 的相关引用，我打印的log，请老师看看，代码是城市部分List.vue：

<template>
 <div class="list" ref="wrapper">
   <div>
     <div class="area">
       <div class="title border-topbottom">当前城市</div>
       <div class="button-list">
         <div class="button-wrapper">
           <div class="button">北京</div>
         </div>
       </div>
     </div>
     <div class="area">
       <div class="title border-topbottom">热门城市</div>
       <div class="button-list">
         <div class="button-wrapper"
v-for="item of hot"
:key="item.id"
>
           <div class="button">{{item.name}}</div>
         </div>
       </div>
     </div>
     <div class="area"
v-for="(item, key) of cities"
:key="key"
:ref="key"
>
       <div class="title border-topbottom">{{key}}</div>
       <div class="item-list">
         <div class="item border-bottom"
v-for="innerItem of item"
:key="innerItem.id"
>{{innerItem.name}}</div>
       </div>
     </div>
   </div>
 </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
 name: 'CityList',
 props: {
   cities: Object,
   hot: Array,
   letter: String
},
 mounted () {
   this.scroll = new BScroll(this.$refs.wrapper)
 },
 watch: {
   letter () {
     if (this.letter) {
       const elementUp = this.$refs
       const element = this.$refs[this.letter]
       console.log(elementUp)
       console.log(element)
     }
   }
 }
}
</script>

<style lang="stylus" scoped>
 @import '~styles/varibles.styl'
// .border-topbottom 对边框的1像素的颜色编写
.border-topbottom
   &:before
border-bottom-color: #ccc
   &:after
border-color: #ccc
.border-bottom
   &:before
border-bottom-color: #ccc

.list
overflow: hidden // 让list不能滚动
position: absolute
width: 100%
   top:1.78rem
left: 0
right: 0
bottom: 0
.title
line-height: .54rem
background: #eee
padding-left: .2rem
color: #666
font-size .26rem
.button-list
overflow hidden //有了这个overflow hidden ，下面的按钮才能显示，配合float 一起使用的
padding: .1rem .6rem .1rem .1rem
.button-wrapper
float: left
width: 33.33%
       .button
margin: .1rem
padding: .1rem 0 //上下0.1rem 左右是0
text-align: center
border: .02rem solid #ccc
border-radius: 0.06rem
.item-list
.item
line-height: .76rem
padding-left: .2rem
</style>

运行的截图：

Answer 1

慕丝3836490 2018-05-03 17:08:07

解决了，获取字母的时候，我用错方法了，用的是textContent,换成innerText就好了，不知道你是不是这个原因

Answer 2

慕丝3836490 2018-05-03 16:37:29

我也undefined了

Answer 3

Dell 2018-05-03 00:30:30

解决了吗？

• 静水流深001 #1

  我也遇到了，发现是vue版本问题，使用@2.5.2版本就没问题，安装新版@2.5.18就报错了，还未解