Styjun

Tile the chessboard with four-colored triominoes

The meaning of "scale" in "because diversions scale so easily wealth becomes concentrated"

Why do dragons like shiny stuff?

Is space radiation a risk for space film photography, and how is this prevented?

What does the ISO setting for mechanical 35mm film cameras actually do?

How to switch an 80286 from protected to real mode?

Identify Batman without getting caught

Does XOR'ing a random number with its inverse reduce its security if the result is a palindrome?

Why the prevalence of Tilda Swinton?

Is there a way to say "double + any number" in German?

Getting an entry level IT position later in life

Is a switch from R to Python worth it?

How and where to get you research work assessed for PhD?

Why did the US Airways Flight 1549 passengers stay on the wings?

What is the difference between these two share classes of an ETF?

How do I show and not tell a backstory?

Writing computer program code for free in an interview?

In MTG, was there ever a five-color deck that worked well?

Can attackers change the public key of certificate during the SSL handshake

What is it exactly about flying a Flyboard across the English channel that made Zapata's thighs burn?

A verb for when some rights are not violated?

How to win against ants

How can I perform a deterministic physics simulation?

Plato and the knowledge of the forms

Nuxt.js:How to define common method used in mounted () of component, and change data of component

Why do we need middleware for async flow in Redux?create a component inside a component, getting error: “Failed to mount component: template or render function not defined.”How to mount dynamically single file component in Vue.jsVueJS - Accessing store data inside mountedModifying data in one component based on a state of parallel componentexported method and unexported methods in Vue.js componentvue js mounted firebase asynchronous call does not update dataDetect data changes in database using listeneraccess methods from the vue current componentVue - event listener leaks

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I want to detect the scroll event in the mounted () of the component as follows, and change the data used in the component.

・component

<script>
import checkScroll from '~/utils/checkScroll'

export default {
 ...
 data() 
 return 
 scrollPosition: 0
 
 ,
 mounted() 
 window.addEventListener(
 'scroll',
 checkScroll(this.scrollPosition, window.scrollY)
 )
 ,
</script>

・utils/checkScroll.js

export default function checkScroll(scrollPosition, scrollY) 
 scrollPosition = scrollY

There are two issues in this case


1. I want to execute this function each time I scroll, but the function is executed only at the first scroll

2.The value of this.scrollPosition inside component does not change.


If this is the case, how will it work?

javascript vue.js nuxt.js

share|improve this question

edited Mar 27 at 4:03

xKxAxKx

asked Mar 27 at 3:54

xKxAxKxxKxAxKx

36711 gold badge44 silver badges2020 bronze badges

add a comment | 

2

I want to detect the scroll event in the mounted () of the component as follows, and change the data used in the component.

・component

<script>
import checkScroll from '~/utils/checkScroll'

export default {
 ...
 data() 
 return 
 scrollPosition: 0
 
 ,
 mounted() 
 window.addEventListener(
 'scroll',
 checkScroll(this.scrollPosition, window.scrollY)
 )
 ,
</script>

・utils/checkScroll.js

export default function checkScroll(scrollPosition, scrollY) 
 scrollPosition = scrollY

There are two issues in this case


1. I want to execute this function each time I scroll, but the function is executed only at the first scroll

2.The value of this.scrollPosition inside component does not change.


If this is the case, how will it work?

javascript vue.js nuxt.js

share|improve this question

edited Mar 27 at 4:03

xKxAxKx

asked Mar 27 at 3:54

xKxAxKxxKxAxKx

36711 gold badge44 silver badges2020 bronze badges

add a comment | 

I want to detect the scroll event in the mounted () of the component as follows, and change the data used in the component.

・component

<script>
import checkScroll from '~/utils/checkScroll'

export default {
 ...
 data() 
 return 
 scrollPosition: 0
 
 ,
 mounted() 
 window.addEventListener(
 'scroll',
 checkScroll(this.scrollPosition, window.scrollY)
 )
 ,
</script>

・utils/checkScroll.js

export default function checkScroll(scrollPosition, scrollY) 
 scrollPosition = scrollY

There are two issues in this case


1. I want to execute this function each time I scroll, but the function is executed only at the first scroll

2.The value of this.scrollPosition inside component does not change.


If this is the case, how will it work?

javascript vue.js nuxt.js

share|improve this question

edited Mar 27 at 4:03

xKxAxKx

asked Mar 27 at 3:54

xKxAxKxxKxAxKx

36711 gold badge44 silver badges2020 bronze badges

<script>
import checkScroll from '~/utils/checkScroll'

export default {
 ...
 data() 
 return 
 scrollPosition: 0
 
 ,
 mounted() 
 window.addEventListener(
 'scroll',
 checkScroll(this.scrollPosition, window.scrollY)
 )
 ,
</script>

export default function checkScroll(scrollPosition, scrollY) 
 scrollPosition = scrollY

share|improve this question

edited Mar 27 at 4:03

xKxAxKx

asked Mar 27 at 3:54

xKxAxKxxKxAxKx

36711 gold badge44 silver badges2020 bronze badges

share|improve this question

edited Mar 27 at 4:03

xKxAxKx

asked Mar 27 at 3:54

xKxAxKxxKxAxKx

36711 gold badge44 silver badges2020 bronze badges

asked Mar 27 at 3:54

xKxAxKxxKxAxKx

36711 gold badge44 silver badges2020 bronze badges

asked Mar 27 at 3:54

xKxAxKxxKxAxKx

36711 gold badge44 silver badges2020 bronze badges

1 Answer
1

active

oldest

votes

0

The first issue shouldn`t happen. if u add eventListener it will be executed every time you scroll and i have checked locally it works as expected. But you should pass a function to event listener, but you are passing already executed function.

You could return result from it and do something like this

export default function checkScroll(event) 
 return window.scrollY;


mounted() 
 window.addEventListener("scroll", event => 
 this.scrollPosition = checkScroll(event);
 );
 

Here CBS with working example https://codesandbox.io/s/0qjkoox68v

share|improve this answer

answered Mar 28 at 14:25

AldarundAldarund

9,39444 gold badges3636 silver badges6868 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369550%2fnuxt-jshow-to-define-common-method-used-in-mounted-of-component-and-change%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

The first issue shouldn`t happen. if u add eventListener it will be executed every time you scroll and i have checked locally it works as expected. But you should pass a function to event listener, but you are passing already executed function.

You could return result from it and do something like this

export default function checkScroll(event) 
 return window.scrollY;


mounted() 
 window.addEventListener("scroll", event => 
 this.scrollPosition = checkScroll(event);
 );
 

Here CBS with working example https://codesandbox.io/s/0qjkoox68v

share|improve this answer

answered Mar 28 at 14:25

AldarundAldarund

9,39444 gold badges3636 silver badges6868 bronze badges

add a comment | 

0

The first issue shouldn`t happen. if u add eventListener it will be executed every time you scroll and i have checked locally it works as expected. But you should pass a function to event listener, but you are passing already executed function.

You could return result from it and do something like this

export default function checkScroll(event) 
 return window.scrollY;


mounted() 
 window.addEventListener("scroll", event => 
 this.scrollPosition = checkScroll(event);
 );
 

Here CBS with working example https://codesandbox.io/s/0qjkoox68v

share|improve this answer

answered Mar 28 at 14:25

AldarundAldarund

9,39444 gold badges3636 silver badges6868 bronze badges

add a comment | 

The first issue shouldn`t happen. if u add eventListener it will be executed every time you scroll and i have checked locally it works as expected. But you should pass a function to event listener, but you are passing already executed function.

You could return result from it and do something like this

export default function checkScroll(event) 
 return window.scrollY;


mounted() 
 window.addEventListener("scroll", event => 
 this.scrollPosition = checkScroll(event);
 );
 

Here CBS with working example https://codesandbox.io/s/0qjkoox68v

share|improve this answer

answered Mar 28 at 14:25

AldarundAldarund

9,39444 gold badges3636 silver badges6868 bronze badges

export default function checkScroll(event) 
 return window.scrollY;


mounted() 
 window.addEventListener("scroll", event => 
 this.scrollPosition = checkScroll(event);
 );
 

share|improve this answer

answered Mar 28 at 14:25

AldarundAldarund

9,39444 gold badges3636 silver badges6868 bronze badges

answered Mar 28 at 14:25

AldarundAldarund

9,39444 gold badges3636 silver badges6868 bronze badges

answered Mar 28 at 14:25

AldarundAldarund

9,39444 gold badges3636 silver badges6868 bronze badges