在vue js中输入输入字段后如何触发计算函数？

Question

现在我正在使用以下代码。当我使用 @change 时它不起作用？

 <div class="col-md-3">
  <div class="form-group">
  <label>Longitude</label>
  <input id="lngVillage" 
         type="text" 
         class="form-control" 
         placeholder="Longitude of Village" 
         name="lngVillage" 
         required="" 
         v-model="lng" 
         pattern="^[0-9]+\.[0-9][0-9][0-9][0-9]$" 
         maxlength="7" 
         oninvalid="this.setCustomValidity('Enter a valid Longitude')"
         oninput="this.setCustomValidity('')">
  </div>
 </div>
<div v-if="isDisabled == false">
</div>

我的计算函数是

 computed: {
  isDisabled() {
      if (this.lng.length > 5) {
        axios.get('url')
          .then(response => {
          })
          .catch(e => {
            this.errors.push(e)
          })
      } else {
        return true;
      }
  }
 },

在输入字段中输入后，我需要调用 isDisabled()。请帮助我找到解决方案。

Answer 1

有更多方法可以解决这个问题。您可以使用计算的 setter 来解决它，但我相信观察者在这里会更合适。使用以下代码设置对 lng 数据的监视。

computed: {
  isDisabled() {
      return (this.lng.length > 5) ? true : false
  }
},
watch: {
  lng: function(newValue, oldValue) {
    if (newValue.length > 5 && this.lar.length > 5) {
      this.executeCall();
    }
  },
  lar: function(newValue, oldValue) {
    if (newValue.length > 5 && this.lng.length > 5) {
      this.executeCall();
    }
  }
},
methods: {
  executeCall() {
    axios
      .get("url")
      .then(response => {})
      .catch(e => {
        this.errors.push(e);
      });
  }
}

更多详情请参考https://vuejs.org/v2/guide/computed.html#Watchers。