We Keep Coding

cant access data return{} varibles in VueJS

function HeaderreRender() {
HeaderRender = false;
this.$nextTick(() => {
HeaderRender = true;
});
};
export default {
name: 'Home',
components: {
HeaderItem,
},
data: function() {
return {
HeaderRender: true,
};
}
}
this is the code now I want to use v-if="HeaderRender" to re-render the headerItem
but when I call function HeaderreRender()
it is replying to me
Uncaught ReferenceError: HeaderRender is not defined
on the function
any suggestions? on why this happens?

Try to place the HeadereRender() function within the methods object of the component and also, it's this.HeaderRender=true
In simple terms, this method does not know about the HeaderRender variable, thus it is not defined in the scope of the function, written that way

Vue lost reactivity

Can't understand why this simple things not reactive.
Looks like I'm missed some Vue's basis.
<template>
<div>
{{connection_status}}
</div>
</template>
<script>
export default {
data() {
return {
connection_status: 'loading',
};
},
created() {
Echo.connector.socket.on('connect', function(){
this.connection_status = 'connected';
console.log(this.connection_status );
});
Echo.connector.socket.on('disconnect', function(){
this.connection_status = 'disconnected';
console.log(this.connection_status );
});
},
}
</script>
Echo runs throught socket.io and works correct. All events triggers in time.
Console output when connected:
connected
But on page
loading
Same thing when disconnected triggers.
In console:
disconnected
On page
loading

Your problem is that this inside the callback function doesn't refer to the Vue instance. You should use an arrow function instead ..
created() {
Echo.connector.socket.on('connect', ()=>{
this.connection_status = 'connected';
console.log(this.connection_status );
});
Echo.connector.socket.on('disconnect', ()=>{
this.connection_status = 'disconnected';
console.log(this.connection_status );
});
},
Or you could assign this to a variable and use it in the callback function ..
created() {
const vm = this;
Echo.connector.socket.on('connect', function(){
vm.connection_status = 'connected';
console.log(vm.connection_status );
});
Echo.connector.socket.on('disconnect', function(){
vm.connection_status = 'disconnected';
console.log(vm.connection_status );
});
},

In javascript a function is an object. Using function() {} defines a new object scope and therefore a new scope for this. You are assigning the value to the connection_status property on the function, not your vue component.
The best practice is to use arrow functions unless you need a new function scope as arrow functions inherit this from the scope they are defined in.
Echo.connector.socket.on('connect', () => {
this.connection_status = 'connected';
console.log(this.connection_status );
});
Echo.connector.socket.on('disconnect', () => {
this.connection_status = 'disconnected';
console.log(this.connection_status );
});

You should use the mounted() hook instead of the created() one if I understand the doc well : https://v2.vuejs.org/v2/api/#created

Calling Vue method from inside mounted function

In my Vue mounted code, I am calling a function test via this.test(). This works fine as intended.
When however I am calling this.test() from the new ResizeObserver function, I am getting an error
this.test is not a function
I understand that this is because the this there is now pointing to the resizeObserver. What I do not understand is what I should use there instead. Removing the this also gives an error.
I have the following Vue code
mounted: function() {
this.test();
new ResizeObserver(function() {
this.test();
}).observe(this.g("tC"));
},
methods: {
test: function() {}
....
}

You should either bind "this" to the function passed to ResizeObserver
mounted: function() {
this.test();
new ResizeObserver(function() {
this.test();
}.bind(this)).observe(this.g("tC"));
},
Or use an arrow function (if your environment supports ES6) since arrow functions use "this" value of the outer scope:
mounted: function() {
this.test();
new ResizeObserver(() => {
this.test();
}).observe(this.g("tC"));
},

It works for me like this
mounted: function() {
$vm = this;
new ResizeObserver(function() {
$vm.test();
}).observe(this.g("tC"));
},
methods: {
test: function() {}
....
}

Use Arrow functions to bind scope
new ResizeObserver(()=> { //--> Arrow Function
this.test();
}).observe(this.g("tC"));

How to call vue instance outside it in Javascript

How can I call the test vue in javascript? Here is my code, I want to call test when I do something in javascript function.
function clickit() {
this.test.fetchTestData();
}
var test = new Vue({
el: '#viewport',
data: {
test_data: []
},
mounted: function () {
this.fetchTestData();
},
methods: {
fetchTestData: function () {
$.get(test.json, function (data) {
this.test_data = data;
alert(this.test_data.isActive);
});
}
}
});

You are attempting to use this inside clickit() where this refers to window, so you just need to remove this and it should call the method inside the view model:
function clickit() {
test.fetchTestData();
}

If you compile this code with 'vue-cli-service build' the variable 'test' will not be defined, but you can make it visible to javascript in the mounted function:
new Vue({
el: '#viewport',
data: {
test_data: []
},
mounted: function () {
window.test=this;
},
methods: {
fetchTestData: function () {
$.get(test.json, function (data) {
this.test_data = data;
alert(this.test_data.isActive);
});
}
}
});
Then you can call it from javascript:
function clickit() {
window.test.fetchTestData();
}

Another way to call VueJs method using external java-script.
Firstly we should create a file. name event.js
import Vue from 'vue';
export default new Vue({
data: {
}
});
After that we should import that event.js to our component
import Event from "../event.js";
Then we can emit an event on our javascript function like below
function yourJavascriptFunction(){
Event.$emit("fetchdata");
}
In your component, mounted property should be like below:
mounted() {
Event.$on("fetchdata", group => {
this.fetchData();
});
},
methods() {
async fetchData() {
console.log('hoooray :)');
}
},

JS scope: call parent function using namespace

How do I call a parent namespace function from within a function?
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
setTimeout ( function () {
myNamespace.funcOne(); //how do I call funcOne?
}, 2000);
}
}

The usual way would be to use the this keyword inside the literal
var myNamespace = {
funcOne : function () {
//do something
},
funcTwo : function () {
var self = this;
setTimeout ( function () {
self.funcOne();
}, 2000);
}
}
But what you're doing should work just fine as well -> FIDDLE