请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

scrollToElement为Undefined

``
图片描述

<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="list-area">
        <div class="area-title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="botton-wrapper">
            <div class="button">{{this.city}}</div>
          </div>
        </div>
      </div>
      <div class="list-area">
        <div class="area-title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="botton-wrapper"
          v-for="item of hotCities"
          :key="item.id"
          @click="handleCityClick(item.name)">
            <div class="button" >{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="list-area"
      v-for="(item,key) of cities"
      :key="key"
      :ref="key"
      >
        <div class="area-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>
import { mapState, mapActions } from 'vuex'
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  computed: {
    ...mapState(['city'])
  },
  data () {
    return {
      scroll: ''
    }
  },
  methods: {
    handleCityClick (city) {
      this.ChangeCity(city)
      this.$router.push('/')
    },
    ...mapActions(['ChangeCity'])
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.warpper, {click: true})
  },
  watch: {
    letter () {
      if (this.letter) {
        const ele = this.$refs[this.letter][0]
        this.scroll.scrollToElement(ele)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/varibles.styl'
  .border-topbottom
    &:before
      border-color #ccc
  .border-bottom
    &:before
      border-color #ccc
    &:after
      border-color #ccc
  .list
    width 100%
    clear both
    position absolute
    left 0
    top 7.6rem
    right 0
    bottom 0
    overflow hidden
    .list-area
      text-indent 1rem
      .area-title
        line-height 2rem
        height 2rem
        font-size 1.2rem
        color $darkTextColor
        background #EEEEEE
      .button-list
        overflow hidden
        padding .5rem 3rem .5rem .5rem
        .botton-wrapper
          float left
          width 32%
          margin .2rem
          .button
            margin .1rem
            padding .2rem 0
            border .1rem solid #ccc
            text-align center
            font-size 1.4rem
      .item-list
         .item
           font-size 1.4rem
           padding .5rem 0
</style>

```

正在回答

2回答

看了你重新编辑发上来的代码就找到了问题,你ref属性赋值的是wrapper

<div class="list" ref="wrapper">

与你使用的时候的值(warpper)不对应,所以导致了报错,因为它没有获取到对应的实例对象

 mounted () {
    this.scroll = new Bscroll(this.$refs.warpper, {click: true})
  },


0 回复 有任何疑惑可以回复我~
  • 提问者 一如忘词 #1
    那怎么改呢
    回复 有任何疑惑可以回复我~ 2020-10-11 22:33:57
  • 提问者 一如忘词 #2
    非常感谢!谢谢谢
    回复 有任何疑惑可以回复我~ 2020-10-11 22:48:59
Samrtiboy 2020-10-11 13:20:15

同学你好,最好能把List.vue代码发上来。

0 回复 有任何疑惑可以回复我~
  • 提问者 一如忘词 #1
    import { mapState, mapActions } from 'vuex'
    import Bscroll from 'better-scroll'
    export default {
      name: 'CityList',
      props: {
        hotCities: Array,
        cities: Object,
        letter: String
      },
      computed: {
        ...mapState(['city'])
      },
      data () {
        return {
          scroll: ''
        }
      },
      methods: {
        handleCityClick (city) {
          this.ChangeCity(city)
          this.$router.push('/')
        },
        ...mapActions(['ChangeCity'])
      },
      mounted () {
        this.scroll = new Bscroll(this.$refs.warpper, {click: true})
      },
      watch: {
        letter () {
          if (this.letter) {
            const element = this.$refs[this.letter][0]
            console.log(element)
            this.scroll.scrollToElement(element)
          }
        }
      }
    }
    回复 有任何疑惑可以回复我~ 2020-10-11 13:21:48
  • 提问者 一如忘词 #2
    现在报错是这个
    vue.esm.js?efeb:628 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'children' of undefined"
    
    found in
    
    ---> <CityList> at src/pages/city/components/List.vue
           <City> at src/pages/city/City.vue
             <App> at src/App.vue
               <Root>
    回复 有任何疑惑可以回复我~ 2020-10-11 13:22:22
  • Samrtiboy 回复 提问者 一如忘词 #3
    打印一下this.letter看看是否有值
    回复 有任何疑惑可以回复我~ 2020-10-11 13:52:00
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信