点击事件不起作用

Question

点击热门城市和城市列表不会跳转，我使用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>

Answer 1

weixin_慕尼黑2574710 2019-06-20 00:32:55

看代码貌似没什么问题，把报错信息贴出来分析一下

• 提问者 朱青1900 #1

  也没有报错，就是点击效果不行，Home首页右上角城市也显示，就是说Vuex创建的store数据没错吧，但是点击效果就是不行

• 提问者 朱青1900 #2

  感谢回答，我重新运行下，可以了，昨天可能是因为缓存？

• 提问者 朱青1900 #3

  多点击几次，点击事件又失效了

点开查看后面2条评论