我无法通过数据属性(状态)将数据数据从“已安装”中的函数传递到“方法”中的方法

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (17)

我对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,
    };
  },
提问于
用户回答回答于

好吧看起来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(){...}位于方法内:{...}或挂载{...},这也可能导致您所描述的错误

扫码关注云+社区

领取腾讯云代金券