Vue.js 计算属性 setInterval

Question

我是 Vue js 的新手，我有这样的代码：

Para.vue

<template>
  <t-row>
    <t-col :span="13">
      <t-input
        :id="id+'_tam'"
        ref="tam"
        v-model="ayristirilmisPara.tam"
        reverse
        :label="label"
        :disabled="disabled"
        name="Oran *"
        :labelSpan="15"
        :inputSpan="8"
        :maxlength="tamMaxLength"
        :vNumber="true"
        @input="updateTam"
        v-validate="{ required: this.isRequired }"
        :error="errors.first('Oran *')"
        class="para"
      />
    </t-col>
    <t-col :span="1" style="padding-left: 0px; padding-right: 0px; padding-top: 12.5px;">,</t-col>
    <t-col :span="10">
      <t-input
        ref="kesir"
        :id="id+'_kesir'"
        v-model="ayristirilmisPara.kesir"
        :maxlength="kesirMaxLength"
        :vNumber="true"
        :disabled="disabled"
        :name="'Oran Kesir *'"
        :labelSpan="0"
        :inputSpan="18"
        label
        @input="updateKesir"
        v-validate="{ required: this.isRequired }"
        :error="errors.first('Oran Kesir *')"
        class="para"
      />
    </t-col>
    <t-col :span="1"></t-col>
  </t-row>
</template>

<script>
export default {
  props: {
    tamMaxLength: {
      type: Number,
      default: 3
    },
    kesirMaxLength: {
      type: Number,
      default: 2
    },
    value: {
      type: [String, Number],
      default: "0.00"
    },
    label: {
      type: String,
      default: "",
      required: false
    },
    isRequired: {
      type: Boolean,
      default: false,
      required: false
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      tam: "0",
      kesir: "0"
    };
  },
  methods: {
    updateTam(tam) {
      if (!tam) tam = "";
      this.tam = tam;
      this.$emit("input", `${tam}.${this.kesir}`);
    },
    updateKesir(kesir) {
      if (!kesir) kesir = "";
      this.kesir = kesir;
      this.$emit("input", `${this.tam}.${kesir}`);
    }
  },
  computed: {
    ayristirilmisPara() {
        if (this.value === undefined || this.value === null) this.value = "0.0";
        const paraParcali = this.value.toString().split(".");
        let tutar = {
          tam:
            paraParcali[0] == null
              ? 0
              : paraParcali[0] || paraParcali[0] == ""
              ? 0
              : paraParcali[0],
          kesir:
            paraParcali[1] == null
              ? 0
              : paraParcali[1] || paraParcali[1] == ""
              ? 0
              : paraParcali[1]
        };
        this.tam = tutar.tam;
        this.kesir = tutar.kesir;
        this.$emit("input", `${tutar.tam}.${tutar.kesir}`);

        return tutar;
    }
  }
};
</script>
<style>
.el-input {
  min-width: 45px;
}
.para .el-input__inner {
  padding: 0px;
}
</style>

它工作正常。当用户尝试删除所有带有 id'+_tam' 和 id+'_kesir' 的输入区域时，它会自动置为 0。我想要做的是，我想等待 3 秒让用户输入一个输入，如果他/她没有输入一个，那么我将输入 0。我尝试在计算属性中编写以下代码：

 computed: {
    ayristirilmisPara() {
      setInterval(function() {
        if (this.value === undefined || this.value === null) this.value = "0.0";
        const paraParcali = this.value.toString().split(".");
        let tutar = {
          tam:
            paraParcali[0] == null
              ? 0
              : paraParcali[0] || paraParcali[0] == ""
              ? 0
              : paraParcali[0],
          kesir:
            paraParcali[1] == null
              ? 0
              : paraParcali[1] || paraParcali[1] == ""
              ? 0
              : paraParcali[1]
        };
        this.tam = tutar.tam;
        this.kesir = tutar.kesir;
        this.$emit("input", `${tutar.tam}.${tutar.kesir}`);

        return tutar;
      }, 3000);
    }
  }

但它没有用。我怎样才能做到这一点？感谢您的关注。

Answer 1

1. 使用“watch”部分指示“value”手表而不是“computed”部分：

watch: {
  value (newValue) {
    setInterval(...)
  }
}

1. 传递给 setInterval 的函数应该绑定到“this”，因为它在 above 中提到过

Answer 2

首先，你有一个this 问题，因为你有setInterval(function() {，this 指向你的函数而不是组件。您可以通过使用胖箭头语法setInterval(() => ) 或在函数前使用const self = this; 来解决这个问题。同样在 cmets 中建议，将这段代码添加到 watch 而不是 computed。但是如果你使用setInterval，你还需要记住在开始新的间隔之前清除间隔，否则你每次都会创建一个新的间隔。所以这里我用setTimeout，情况也是一样的，需要先清除timeout再开始新的。简化示例：

data: function() {
  return {
    text: "",
    myTimeout: ""
  };
},
watch: {
  text(newValue) {
    clearTimeout(this.myTimeout);
    this.myTimeout = setTimeout(() => {
      console.log(this.text);
    }, 3000);
  }
}

或使用function，将您的手表修改为：

watch: {
  text(newValue) {
    const self = this;
    clearTimeout(this.myTimeout);
    this.myTimeout = setTimeout(function() {
      console.log(self.text);
    }, 3000);
  }
}

这是一个SANDBOX

Answer 3

那是因为您返回 tutar 是在回调中发生的。 ayristirilmisPara() 本身并不是返回的 tutar。

记住，从计算属性中实际返回一个值是非常重要的。否则，Vue 将不知道该值应该是什么。

另外请记住，更改或改变计算属性中的下划线数据值是令人头疼和错误的一大来源。

• 当您需要更改数据时 - 使用方法
• 当您需要更改现有数据的显示方式时 - 使用计算

看看这些，你就会得到答案。

• Vue School Computed Properties
• Computed Properties and Watchers