Use vue-seamless-scroll to wrap a list of scrolling divs. When the divs in the current list need to be clicked for other logic processing, you will find no effect
There is only one reason: because the dom wrapped in the middle of vue-seamless-scroll is copied and rendered, and there is no dom event.
At this point, we can use event delegation to get the object we clicked with $event.target
<div class="scroll-list" v-if="safeData.brandList" @click="handleClick($event)">
<vue-seamless-scroll
:data="safeData.brandList"
class="seamless-warp"
:class-option="classOption"
>
<div class="flex line-feed">
<div
v-for="(item) in safeData.brandList"
:key="item.id"
:data-obj="JSON.stringify(item)"
class="brand-item pointer"
>
{
{ item.name }}
</div>
</div>
</vue-seamless-scroll>
</div>
When you click to pass the value, it is passed in through data-obj
handleClick($event){
const obj =JSON.parse($event.target.dataset.obj)
this.showDialog(obj)
},
The current scene needs to get an object.
If you only need an id or name, you can directly pass
:id=“item.id”
:name=“item.name”
The format of the custom attribute in vue is data-xxx,
which is obtained as: e.target.dataset.xxx