console.log(e.target.innerText) 不能获取到字母,是什么原因呢?
来源:8-6 Vue项目城市选择页 - 兄弟组件数据传递
unbreakable_全栈
2019-02-24
在这里输入代码`<template>
<div class="list">
<div class="item" v-for="item of letters" :key="item"
@touchstart='handleTouchStart'
@touchmove='handleTouchMove'
@touchend='handleTouchEnd'
@click='handleLetterClick'
:ref="item"
>
{{item}}
</div>
</div>
</template>
<script>
export default {
name: 'CityAlphabet',
props: {
cities: Object
},
computed: {
letters () {
const letters = []
for (let i in this.cities) {
letters.push(i)
}
return letters
}
},
data () {
return {
touchStatus: false
}
},
methods: {
handleLetterClick (e) {
console.log(e.target.innerText)
this.$emit('change', e.target.innerText)
},
handleTouchStart () {
this.touchStatus = true
},
handleTouchMove (e) {
if (this.touchStatus) {
const startY = this.$refs['A'][0].offsetTop
const touchY = e.touches[0].clientY - 79
const index = Math.floor((touchY - startY) / 20)
if (index >= 0 && index < this.letters.length) {
this.$emit('change', this.letters[index])
}
}
},
handleTouchEnd () {
this.touchStatus = false
}
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
display: flex
flex-direction: column
justify-content: center
position: absolute
top: 1.58rem
right: 0
bottom: 0
width: .4rem
.item
line-height: .4rem
text-align: center
color: $bgColor
</style>
`
写回答
2回答
-
unbreakable_全栈
提问者
2019-02-24
handleLetterClick (e) { console.log(e.target) console.log(e.target.innerText) this.$emit('change', e.target.innerText) }
00 -
Dell
2019-02-24
先打印出 e.target 看一下输出的内容是什么
032019-02-24
相似问题