I’m pretty much new to Vue.js. I’m drawing an svg map with d3 and a geojson file. for the map to be rendered as soon as the page loads, I wrote the code in Mounted. the code also has some related functions to the map, like clicked function and hover functions to show tooltips and so on..
now here’s the scenario: when I click on a state on the map, to detect the state’s name and pass it to a method. the method then will draw a data chart based on the given state.
the “clicked” function in Mounted is handling the click event on the svg map. but I couldn’t pass the clicked state from the “Clicked” function in mounted to the method in “methods”.
this is the “clicked” function in mounted:
mounted: function mounted(){// Zoom to feature on click
function clicked(d,i) {
var width = 410;
var height = 600;
var centered;
var path = d3.geoPath()
.projection(projection);
var features = d3.select(“.features”);
var x, y, k;
if (d && centered !== d) {
// Compute the new map center and scale to zoom to
var centroid = path.centroid(d);
var b = path.bounds(d);
x = centroid[0];
y = centroid[1];
k = .8 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
centered = d
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
//Highlight the new feature
features.selectAll(“path”)
.classed(“highlighted”,function(d) {
return d === centered;
})
.style(“stroke-width”, 1 / k + “px”); // Keep the border width constant
//Zoom and re-center the map
/*features
.transition()
.duration(1000)
.attr(“transform”,”translate(“ + width / 2 + “,” + height / 2 + “)scale(“ + k + “)translate(“ + -x + “,” + -y + “)”);*/
//“state” is data property
// d.properties.gov_name_f is the clicked state to pass to
and then read it from a method
this.state= d.properties.gov_name_f;
//now here the data is passed normally inside “state” but it becomes empty when I try to read it from a method
if (this.state === “Nabeul” || this.state=== “Dar Chaabane El Fehri”) {
console.log(“samer lives here “+ this.state);
}else{
console.log(“samer doesn’t live in “+this.state);
}
};}
this is the method that to pass the “state” data property to:
methods: {
refresh(){
this.id++;
this.query = “select%20A%2CE”;
console.log(“fuck “+this.state);
//this.state is supposed to return the clicked state, but it returns an empty data property
switch (this.state) {
case “Nabeul”:
this.query = “select%20A%2CQ”;
this.id++;
console.log(this.state);
}
},
}
this is the output of the console log when I debug:
console output
the first log is from the “clicked” function in mounted and the second log in from the method that is reding the same data property but returning an empty object.
the data objects:
data() {
return {
state: “”,
gov: “gouvernorat”,
del: “delegations”,
query: “”,
gouvernorat: 0,
id: 0,
};
},
Solution :
Okay It seems like vue.js is having trouble finding the data. There’s a couple things that might cause this.
-Depending how you’re creating a vue.js object or component, the syntax for data will be different. Example:
Using export default
export default {
data() {
return {…}
},
methods:{…},
}
Or
export default {
data: ()=>{
return {…}
},
methods:{…},
}
Using vue.js object
<div id=”app”>
{ message }
</div>
<script>
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})
</script>
Using vue.js component
Vue.component(‘button-counter’, {
data: function () {
return {
count: 0
}
},
template: ‘<button v-on:click=”count++”>You clicked me { count } times.</button>’
})
One Other bug that may be causing is that for whatever reason in vue.js you can only call this.data in the outermost scope of a method. If you want to access it in another scope of the method, you have to use var example = this; and then in the inner scope you can use example.data. For example, here’s a sample of a project I’m working on:
export default {
data() {
return {
loading: false,
partner: ‘’,
conenctions: [],
users: [],
orgs: []
}
},
methods:{
loadConn(){
var vm = this;
axios.get(‘http://localhost:8000/ext/list\_conn/')
.then(function(response){
vm.conenctions = response.data;
console.log(vm.conenctions);
})
},
},
}
The above code will work but the following code won’t
export default {
data() {
return {
loading: false,
partner: ‘’,
conenctions: [],
users: [],
orgs: []
}
},
methods:{
loadConn(){
axios.get(‘http://localhost:8000/ext/list\_conn/')
.then(function(response){
this.conenctions = response.data;
console.log(this.conenctions);
})
},
},
}
Hopefully this helps with the bug
edit: Also make sure the data is in the outermost scope of the vue.js object or component, like in my examples. If data(){…} is inside methods:{…} or mounted{…} that could also cause the bug you’re describing