Time to read: 3 min read
In the past we have a global scope this
with which we can access the parent object of our beloved vuejs properties, functions, global variables, computed ...
there are times when the scope changes and we can not avoid it or we need it to be that way, for example a case like this:
<script>
export default {
data:() => ({
myData: 1
}),
mounted() {
this.myMethod()
},
methods:{
myMethod() {
window.addEventListener('click', function() {
console.log('this >', this.myData)
})
}
}
}
</script>
in the anterion code we are calling the method myMethod
and adding an event to the global objectwindow
so far all perfect but when inside a javascript function that changes the scope to itself our this
of times changes giving us an error
To solve this there are several options that we can choose, of course, this is in each developer
in the modern javascript we now have arrow functions that help us in a simpler and minified syntax of the functions but apart from that the arrow functions do not have a scrope which means that it will not change our this
of vuejs more or less our function is I would see it to work perfectly
<script>
export default {
data:() => ({
myData: 1
}),
mounted() {
this.myMethod()
},
methods:{
myMethod() {
window.addEventListener('click', () => {
console.log('this >', this.myData)
})
}
}
}
</script>
Also a solution if you need specifically the scope of the event or we can not use arrow functions is to create a variable that contains our object this
of vuejs
<script>
export default {
mounted() {
this.myMethod()
},
methods:{
myMethod() {
let _this = this
let self = this
let that = this
window.addEventListener('click', function() {
console.log('this scope (function) >', this)
console.log('this scope (vuejs) >', _this)
console.log('this scope (vuejs) >', self)
console.log('this scope (vuejs) >', that)
})
}
}
}
</script>
the variable that contains our this
object can really be any name, the three examples in the previous code are the most used for a convention in the code, for example in my case I use_this
because it seems very reprecentative and intuitive
Another not so conventional way in these times having the new arrow functions is to use bind (myScope) to assign a scope to instantiate, let's see what an example would look like:
<script>
export default {
mounted() {
this.myMethod()
},
methods:{
myMethod() {
window.addEventListener('click', function() {
console.log('this scope (vuejs) >', this)
}.bind(this))
}
}
}
</script>
These are the three forms that I think are or would be the most usable and functionally viable to develop with vuejs and have everything more clear and resolved
although there may be more ways that are what I would use and therefore I share