需求為：一個(gè)地址列表，點(diǎn)擊右邊的字母表中的字母，列表跳轉(zhuǎn)到對(duì)應(yīng)首字母部分。

組件的結(jié)構(gòu)是字母組件在根組件里，根組件里有個(gè)動(dòng)態(tài)組件component，根據(jù)境外目的地和境內(nèi)目的地按鈕的切換來切換下面城市列表組件。

采用的方法是，當(dāng)點(diǎn)擊字母時(shí)，觸發(fā)事件將e.target.innerHTML通過$emit('letterChange', e.target.innerHTML)傳給根組件，根組件再將數(shù)據(jù)傳給component動(dòng)態(tài)組件，最后分別在境外目的地和境內(nèi)目的地子組件中用props接收，并用watch監(jiān)聽數(shù)據(jù)的變化，當(dāng)變化時(shí)獲取this.$refs[this.letter][0]，并計(jì)算其距離頂部的距離，然后設(shè)置scrolltop，已達(dá)到滾動(dòng)到指定位置的目的。DOM中的列表用循環(huán)字母表事先綁定了ref。

//此為根組件
<template>
  <div class="destination">
    <letter-list @change="letterChange"></letter-list> //字母組件
    <destination-header></destination-header>
    <destination-list :letter="letter"></destination-list> //目的地列表組件，里面包含切換境內(nèi)境外的動(dòng)態(tài)組件
  </div>
</template>


/此為目的地列表組件
  <template>
  <section class="del-list">
    <div class="tab-contain" :class="{fixed: isfixed}">
      <ul class="tab">
          <li class="tab-item"
          v-for="item of tabs"
          :key="item.id"
          :class="{ active: currentTab===item.id}"
          @click="currentTab = item.id"
          >{{item.value}}</li>
          <span class="line" :class="{transition:currentTab==='internal-list'}"></span>
      </ul>
    </div>
    <component :is="currentTabComponent" :letter="letter"></component> //此為動(dòng)態(tài)組件，將父組件傳來的值，再向下傳給里面的境內(nèi)目的地和境外目的地組件
  </section>
</template>


//此為城市目的地境外部分的組件
<template>
  <div class="abroad-list">
      <div class="hot">
        <div class="title">熱門推薦</div>
        <ul class="hot-recommend">
          <li v-for="item in hotRecommend" :key="item.id">
            <a :href="item.jumpInfo.jumpH5Url">
              <img :src="item.images[0]">
              <div><span>{{item.title}}</span><p>{{item.subTitle}}</p></div>
            </a>
          </li>
        </ul>
      </div>
      <div class="all-dest">
        <div class="title">選擇目的地</div>
          <ul class="all-dest-list">
            <li class="dest"
            v-for="items of allDest"
            :key="items.title"
            :ref="items.title"> //此處通過循環(huán)數(shù)組里的每個(gè)對(duì)象，將其title的值綁定為ref，即A、B、C、D...Z
              <div class="title">{{items.title}}</div>
              <ul class="dest-items">
                <li
                v-for="item of items.list" //此處通過循環(huán)對(duì)象的list項(xiàng)這個(gè)數(shù)組，添加具體的城市名
                :key="item.id">
                  <a :href="item.jumpInfo.jumpH5Url">{{item.title}}</a>
                </li>
              </ul>
            </li>
          </ul>
      </div>
  </div>
</template>

問題是現(xiàn)在傳過來的值在watch中能打印出來

console.log(this.letter) //A  B  C  D  E...點(diǎn)擊哪個(gè)打印哪個(gè)

但用到this.$refs里卻是undefined，如下：

consol.log(this.$refs[this.letter]) //undefined，

加上數(shù)組索引

consol.log(this.$refs[this.letter][0]) //Error in callback for watcher "letter": "TypeError: Cannot read property '0' of undefined"

vue直接報(bào)錯(cuò)"Error in callback for watcher "letter": "TypeError: Cannot read property '0' of undefined""

直接寫死$refs的鍵名,像這樣

console.log(this.$refs.A[0]) //<li>...</li>
console.log(this.$refs.B[0]) //<li>...</li>
console.log(this.$refs.G[0]) //<li>...</li>
...

都能打印出對(duì)應(yīng)的元素內(nèi)容。

更離奇的是

console.log(typeof this.letter) //打印出來類型是string

但我用

console.log(this.letter instanceof String) //輸出的確實(shí)false

這個(gè)this.letterd 到底是個(gè)什么東西啊？！崩潰了，搞了一整天了。
之前是直接把點(diǎn)擊獲得的數(shù)據(jù)傳入vuex的store里，然后在列表組件里...mapState獲取并用watch監(jiān)聽，但仍然還是這個(gè)一模一樣的問題。

求大神解答