How to stop auto scroll to top in Vue.js

Question

I have a component structure as bellow:

<Search>
 <SearchField>
   <Image>
   <Summary>
   <Suggestion>
 </SearchField>
</Search>
<Product>              <---- this changes depending on UI selection
   <Result>
      <Option>
        <Filter>       <----Here button click auto scrolls up 
...

The issue is When a button on <Filter> component clicked then a modal opens but underneath everything scrolls up automatically. I need to stop that behaviour. No idea how.

Since there are too many components, not sure where exactly need to set that up and how?

I was thinking of applying the clause to the top level component ´`. Would it be correct?

Required to stop auto scroll up when on mobile.

Answer 1

在点击事件上添加.prevent，就像@click.prevent="activeNews(1)"