如何在vue js中有条件地启用按钮

Question

我正在尝试在距离小于 1 公里时启用按钮。距离变得小于 1 但按钮未启用这里是代码

  <ion-button @click="openWorkFinishModal" :disabled="this.disableStartWorkButton" color="danger"
          >Start Work</ion-button
        >

在js部分

 data() {
    return {
      work_order: "",
      longitude: 0.0,
      latitude: 0.0,
      disableStartWorkButton: true,
    };
  },
  getLocation: function () {
      const geolocation = new GeolocationService.Geolocation();

      let watch = geolocation.watchPosition();
      watch.subscribe((data) => {
        console.log("data",this.longitude,
            this.latitude);
        var distance =  this.checkDistance(
            data.coords.latitude,
            data.coords.longitude,
            this.latitude,
            this.longitude,
            
            "K"
          );
      
      
        if(distance < 1){
          this.disableStartWorkButton = false;
          console.log(this.disableStartWorkButton )

        }
     
      });
    },

你可以看到我正在将 this.disableStartWorkButton 的值更改为 false，当距离变得小于 1 但它不起作用时

Answer 1

删除 this. 应该可以解决问题

:disabled="disableStartWorkButton"

如何在vue js中有条件地启用按钮

how to enable button conditionally in vue js

javascript

vue.js

vuejs2

ionic4