点击事件不起作用
来源:8-9 Vue项目城市选择页 - Vuex实现数据共享
朱青1900
2019-06-19
点击热门城市和城市列表不会跳转,我使用console.log()也不输出点击的城市,对照了老师的源码也没发现问题,下面是我的代码,css部分我没复制。
<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">
{{this.currentCity}}
</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"
@click="handleCityClick(item.name)"
>
<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"
@click="handleCityClick(innerItem.name)"
>
{{innerItem.name}}
</div>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
import Bscroll from 'better-scroll'
import {mapState, mapMutations} from 'vuex'
export default{
name:'CityList',
computed:{
...mapState({
currentCity:'city'
})
},
props:{
hot:Array,
cities:Object,
letter:String
},
methods: {
handleCityClick (city) {
console.log(city);
this.changeCity(city)
this.$router.push('/')
},
...mapMutations(['changeCity'])
},
watch:{
letter (){
if(this.letter){
//通过字母获取DOM节点
const element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
console.log(this.letter)
}
},
//生命周期函数,会在DOM挂载结束后执行
mounted (){
this.scroll = new Bscroll(this.$refs.wrapper)
}
}
</script>
写回答
1回答
-
weixin_慕尼黑2574710
2019-06-20
看代码貌似没什么问题,把报错信息贴出来分析一下
052019-11-04
相似问题