我无法通过数据属性（状态）将数据数据从“已安装”中的函数传递到“方法”中的方法
我对Vue.js很新。我正在用d3和geojson文件绘制svg地图。为了在页面加载后立即呈现地图，我在Mounted中编写了代码。代码还有一些与地图相关的功能，比如点击功能和悬停功能来显示工具提示等等。
现在是这样的场景：当我点击地图上的状态时，我想检测状态的名称并将其传递给方法。然后，该方法将根据给定的状态绘制数据图表。
Mounted中的“clicked”函数正在处理svg地图上的click事件。但我无法将已安装的“Clicked”函数中的单击状态传递给“方法”中的方法。
这是已安装的“点击”功能：
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 I want 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);
}
};}
这是我想将“state”数据属性传递给的方法：
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);
}
},
}
这是我调试时控制台日志的输出： 控制台输出
第一个日志来自已安装的“clicked”函数，第二个日志来自重新定义相同数据属性但返回空对象的方法。
数据对象：
data() {
return {
state: "",
gov: "gouvernorat",
del: "delegations",
query: "",
gouvernorat: 0,
id: 0,
};
},Stack Overflow用户
发布于 2019-06-12 17:18:23
好吧看起来Vue无法找到数据。有几件事可能会导致这种情况。
- 根据您创建vue对象或组件的方式，数据的语法将有所不同。例：
使用导出默认值
export default {
data() {
return {...}
},
methods:{...},
}
要么
export default {
data: ()=>{
return {...}
},
methods:{...},
}
使用vue对象
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
使用vue组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
另一个可能导致的错误是，无论出于何种原因，您只能this.data在方法的最外层范围内调用。如果要在方法的另一个范围内访问它，则必须使用var example = this;，然后在内部范围中使用example.data。例如，这是我正在研究的项目示例：
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);
})
},
},
}
上面的代码将工作，但以下代码不会
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);
})
},
},
}
希望这有助于你的错误
编辑：还要确保数据位于vue对象或组件的最外层，如我的示例中所示。如果data（）{...}位于方法内：{...}或挂载{...}，这也可能导致您所描述的错误
https://stackoverflow.com/questions/-100007003
复制相似问题