is: an address list, click the letter in the alphabet on the right, and the list jumps to the corresponding initials section.
component is an alphabetical component in the root component, and there is a dynamic component in the root component, component, which switches the following city list components according to the switch between the overseas destination button and the domestic destination button.
The method adopted by is that when the letter is clicked, the trigger event transmits the e.target.innerHTML to the root component through $emit ("letterChange", e.target.innerHTML), and then the root component transmits the data to the component dynamic component, and finally receives it with props in the overseas destination subcomponent and the domestic destination subcomponent, and uses watch to listen for the change of the data, obtains this.$refs [this.letter] [0] when the change occurs, and calculates the distance from the top. Then set the scrolltop, to scroll to the specified location. The list in DOM is pre-bound to ref with a circular alphabet.
//
<template>
<div class="destination">
<letter-list @change="letterChange"></letter-list> //
<destination-header></destination-header>
<destination-list :letter="letter"></destination-list> //
</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> //
</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>{{item.subTitle}}
</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"> //titlerefABCD...Z
<div class="title">{{items.title}}</div>
<ul class="dest-items">
<li
v-for="item of items.list" //list
:key="item.id">
<a :href="item.jumpInfo.jumpH5Url">{{item.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
the problem is that the values passed now can be printed out in watch
console.log(this.letter) //A B C D E...
but when used in this.$refs, the undefined, is as follows:
consol.log(this.$refs[this.letter]) //undefined
plus array index
consol.log(this.$refs[this.letter][0]) //Error in callback for watcher "letter": "TypeError: Cannot read property "0" of undefined"
vue directly reported an error "Error in callback for watcher" letter ":" TypeError: Cannot read property"0" of undefined "
write down the key name of $refs directly, like this
console.log(this.$refs.A[0]) //<li>...</li>
console.log(this.$refs.B[0]) //<li>...</li>
console.log(this.$refs.G[0]) //<li>...</li>
...
can print out the corresponding element content.
what is even more bizarre is
console.log(typeof this.letter) //string
but I use
console.log(this.letter instanceof String) //false
what on earth is this this.letterd?! I"m freaking out. I"ve been doing it all day.
used to pass the clicked data directly into the store of vuex, and then get it in the list component .mapState and listen with watch, but it"s still the same problem.
seek the answer of the Great God
