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

现在我使用以下代码。当我使用@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>

---

在输入字段中键入后，我需要调用isDisabled（）。请帮我找到一个解决办法

有更多的方法来解决这个问题。您可以使用计算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);
      });
  }
}

---

有关更多详细信息，请参阅。

isDisabled（）

是计算属性，因此每次更改输入时都会调用它。您还需要什么。是否可以在输入更改时调用isDiabled？是否已使用v-model=“lng”在输入上调用isDiabled。isDisabled中的console.log（）在每次更改输入时它都会被记录。如果我删除此代码，我不会得到相同的结果。您不能在计算属性中使用异步逻辑，除非您使用类似以下内容：先生，如何使用计算解决。先生，如果我删除此代码，我的代码中就不会有相同的代码。先生，我有一个lat和lng输入字段，如何使用您的代码触发。我有两个输入字段作为lar和lng，在更改这两个字段时，我需要触发，这怎么可能发生？我更新了答案，将lar和lng都考虑在内。如果我理解正确，您需要做的是检查lar和lng的输入是否大于5（我理解这是您的场景）。如果液化天然气的体积更小，div就需要隐藏起来。先生，有没有办法删除代码，我不太确定你想要实现什么。也许可以更新这个问题，让这里的每个人都明白你想做什么。关于您最初关于在输入更改时触发某些内容的问题，上面的代码可以做到这一点。

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);
      });
  }
}