老师,我这里为什么打印this.$refs[this.letter]是undefined
来源:8-6 Vue项目城市选择页 - 兄弟组件数据传递
慕粉1609321600
2019-05-30
<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: 'List',
props: {
hot: Array,
cities: Object,
letter: String
},
watch: {
letter () {
if (this.letter) {
const element = this.$refs[this.letter]
// undefined why?
console.log(element)
// 点击字母列表能打印出对应的字母
console.log(this.letter)
}
}
},
mounted () {
this.scroll = new Bscroll(this.$refs.wrapper)
}
}
</script>
<style lang='stylus' scoped>
@import '~styles/varibles.styl'
.border-topbottom
&:before
border-color: #777
&:after
border-color: #777
.border-bottom
&:before
border-color: #000
.list
overflow: hidden
position: absolute
top: 1.58rem
right: 0
left: 0
bottom: 0
.title
line-height: .54rem
background: #eee
padding-left: .2rem
color: #666
font-size: .26rem
.button-list
overflow: hidden
padding: .1rem .6rem .1rem .1rem
.button-wrapper
float: left
width: 33.33%
.button
margin: .1rem
padding: .1rem 0
text-align: center
border: .02rem solid #ccc
border-radius: .06rem
.item-list
.item
line-height: .62rem
padding-left: .2rem
</style>
写回答
2回答
-
hei客
2019-07-12
我也是
10 -
Dell
2019-06-05
分别打印 this.$refs 和 this.letter, 看一下哪一个东西有问题。
022020-04-11
相似问题