Question

我正在试图找出我的逻辑有什么问题，因为我有一个字段试图验证提交的输入值是一个数字。它命中validateForm方法但是由于某种原因，无论输入中的值是数字还是字符串，wrongNumber总是返回true。

我做错了什么想法？

methods: {
    isNumeric: function (n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    },
    validateForm: function (event, $modal) {
        if (this.wrongNumber) {
            event.preventDefault();
            toastada.error('The squares field must contain a number value!');
            return;
        }
        this.saveData($modal);
        return true;
    },
    wrongNumber: function () {
        return this.isNumeric(this.number) === false
    },
  fetchInfo: function(){
    this.$http.get('/api/projects/info', { params: { id: this.id } }).then((response) => {
      this.project = response.data;
    });
  },
  saveData: function($modal){
    this.$http.patch('/api/projects/info', { project: this.project }).then((response) => {
      toastada.success('Changes Saved!');
      $modal.hide(this.modalName);
      return true;
    }, (response) => {
      toastada.error('Something went wrong, please try again!');
      return false;
    });
  },

Answer 1

此语句仅评估Vue实例上是否存在wrongNumber方法，该方法始终为true：

if (this.wrongNumber) {

您应该调用方法并评估结果：

if (this.wrongNumber()) {

或者，您可能会将使用Vue方法与使用Vue计算属性混淆。

如果您将wrongNumber作为计算属性，则可以通过this.wrongNumber访问返回的值，就像您尝试的那样：

methods: {
  isNumeric: function (n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
  },
  validateForm: function (event, $modal) {
    if (this.wrongNumber) {
      event.preventDefault();
      toastada.error('The squares field must contain a number value!');
      return;
    }
    this.saveData($modal);
    return true;
  },
},
computed: {
  wrongNumber: function () {
    return this.isNumeric(this.number) === false
  },
}

VueJS Value必须是有效的数字

1 个答案: