@touchstart，@touchmove， @touchend这三个函数不好使呀这是什么原因呀
来源：8-6 Vue项目城市选择页 - 兄弟组件数据传递
慕用5099044
2019-10-30
Property or method “onHandleTouchStart” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
属性或方法“onhandletouchstart”未在实例上定义，但在呈现期间被引用。通过初始化该属性，确保该属性是被动的，无论是在数据选项中，还是对于基于类的组件
52期-未来 10:05:38
老师这个vue.js 中定义的@touchstart，@touchmove， @touchend这三个函数不好使呀这是什么原因呀
2回答
-
慕用5099044
提问者
2019-10-30
<template>
<div>
<ul class='list'>
<li
class="item"
v-for="item of letters"
:key="item"
:ref="item"
@touchstart="onHandleTouchStart"
@touchmove="onHandleTouchMove"
@touchend="onHandleTouchEnd"
@click="onHandleClick"
>
{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'CityAlphabet',
props: {
cities: Object
},
computed: {
letters () {
/* ['A','B'...'z'] */
const letters = []
for (let i in this.cities) {
letters.push(i)
}
return letters
}
},
data () {
return {
touchStatus: false
}
},
methods: {
onHandleClick (e) {
this.$emit('change', e.target.innerText)
},
onHandleTouchStart () {
debugger
this.touchStatus = true
},
onHandleTouchMove (e) {
debugger
if (this.touchStatus) {
const startY = this.$refs['A'][0].offsetTop
console.log(startY)
/* const touchY = e.touch[0].clientY - 79
const index = Math.floor((touchY - startY) / 20) */
}
},
onHandleTouchEnd () {
debugger
this.touchStatus = false
}
}
}
</script>
<style 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>
这个是我的代码
00 -
慕用5099044
提问者
2019-10-30
dell 老师你什么时间讲解新版vue呀
052020-04-18
相似问题