Как вызвать вычисляемую функцию после ввода в поле ввода в 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

Есть больше способов приблизиться к этому. Вы можете решить это, используя вычислитель, но я считаю, что наблюдатели были бы более подходящими здесь. Установите часы для данных 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.