i have this code in my mounted function :
mounted () {
document.addEventListener('keydown', function (e) {
switch (e.keyCode) {
case 37 :
alert(this.indexPictures)
break
}
})
}
My data value:
data: function () {
return {
indexPictures: this.index,
}
},
My result : undifined
I don't know why but i can't get value in data function and this is the same problem, from methods access. My result : is not a function
Do you have any ideas ? thanks for you help :)
CodePudding user response:
this
inside data()
function is not the same this
as in computed
, methods
, watch
, hook functions, etc... It's not the component instance, but its context. There are advanced cases when you might want to use this
inside a component's data
function but they're low level (e.g: for plugin developers). For the regular developer, a good rule is to never use this
inside the data
function. Note the data
function is run before adding reactivity to the component and at that point computed
and methods
have not yet been declared.
That being said, I don't see a reason to create a reactive data prop called indexPictures
if you already have index
defined. Just use index
directly wherever you would want to use indexPictures
.
The only valid case for creating an alias for a prop is when you want to use a prop
with v-model
in which case you use a computed getter/setter. In the getter you return the prop and in the setter you $emit()
an event which updates the value in parent which, in turn, updates the prop value for the child. See this answer for details.
To conclude: regardless of your reasons, if you want to alias index
as indexPictures
, use a computed:
computed: {
indexPictures() { return this.index }
}
Now you can use this.indexPictures
(or indexPictures
in <template>
) and it will always return the exact same value as this.index
(or index
).
Obviously, index
has to be defined in the component.
CodePudding user response:
Not sure what this.index
is but I will assume it is a prop or something similar.
Try removing the keyword function
from the addEventListener
.
mounted () {
document.addEventListener('keydown', (e)=> {
switch (e.keyCode) {
case 37 :
alert(this.indexPictures)
break
}
})
}
It is not particularly relevant to the problem, but remove the function
keyword from data as well:
data() {
return {
indexPictures: this.index,
}
},
The keyword function
changes the scope, meaning this
is bind to the function itself (in your case the callback).
When you use an arrow function this
keyword will be the same as in mounted
- which means you can access your data.
From MDN docs:
Perhaps the greatest benefit of using Arrow functions is with methods like setTimeout() and EventTarget.prototype.addEventListener() that usually require some kind of closure, call, apply or bind to ensure that the function is executed in the proper scope.
Keep in mind if this is a part of a component it is a good idea to remove that listener before destroying the component.