Question

在我的webApp项目中，我想单击一个字母，并且相关内容将滚动显示。这是js代码：

<script>
 import Bscroll from 'better-scroll'
 export default {
   name: 'CityList',
   props: {
     cities: Object,
     hotCities: Array,
     letter: String
   },
   watch: {
     letter () {
       if (this.letter) {
         const element = this.$refs[this.letter][0]
         this.scroll.scrollToElement(element)
       }
     }
   },
   mounted () {
     this.scroll = new Bscroll(this.$refs.wrapper)
   }
 }
</script>

我使用vue 2.9.3 但是我遇到了一个错误：

[Vue warn]: Error in callback for watcher "letter": "TypeError: Cannot read property '0' of undefined"

谁能帮助我？

<div
  class="area"
  v-for="(item, key) of cities"
 :key="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"
    >
      {{innerItem.name}}
    </div>
  </div>
</div>

我应该添加：ref =“ key”

<div
  class="area"
  v-for="(item, key) of cities"
 :key="key"
 :ref="key"
>

Answer 1

我认为有一段时间手表功能运行，this.$refs[this.letter]尚不可用。所以您可能要检查：

watch: {
  letter () {
    if (this.letter && this.$refs[this.letter]) {
      const element = this.$refs[this.letter][0]
      this.scroll.scrollToElement(element)
    }
  }
}

您的cities具有不同的引用，您无需访问[0]元素

   watch: {
      letter () {
        if (this.letter && this.$refs[this.letter]) {
          const element = this.$refs[this.letter]
          this.scroll.scrollToElement(element)
        }
      }
    }

参数为字母时如何更好地滚动元素

1 个答案: