Using setInterval with Vue.js computed properties

Question

Using setInterval with Vue.js computed properties

Welcome to the world of Vue js! I'm currently working with some code in Para.vue that looks like this:

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>

The current functionality works perfectly fine by automatically inserting 0 when a user attempts to delete all content from the input areas with id'+_tam' and id+'_kesir'. However, now you want to implement a feature where if the user doesn't enter any input within 3 seconds, it should automatically insert 0. You tried using setInterval in the computed property but it didn't work as expected. Here's how you can achieve this:

computed: {
    ayristirilmisPara() {
      let timer = setTimeout(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;
      }.bind(this), 3000);
    }
  }

Give this a try and see if it solves your issue. Thank you for reaching out!

javascript vue.js frontend

Answer 1

Answer №1

Instead of using the "computed" section, utilize the "watch" section with the "value" watch:

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

Ensure that the function passed to setInterval is bound to 'this' as discussed earlier here

Answer 2

Instead of using the "computed" section, utilize the "watch" section with the "value" watch:

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

Ensure that the function passed to setInterval is bound to 'this' as discussed earlier here

Answer 3

Answer №2

In the first place, there seems to be a problem with this. When you have setInterval(function() {, the reference of this is to the function itself and not the component. One way to resolve this is by using fat arrow syntax like setInterval(() => ) or by declaring const self = this; before the function. Additionally, as suggested in the comments, consider adding the code to the watch instead of computed. Remember that when using setInterval, you should clear the interval before starting a new one to avoid creating multiple intervals unintentionally. The same applies when using setTimeout. Here's a simplified example:

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

Another approach is to modify the watch using function:

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

Check out the SANDBOX

Answer 4

In the first place, there seems to be a problem with this. When you have setInterval(function() {, the reference of this is to the function itself and not the component. One way to resolve this is by using fat arrow syntax like setInterval(() => ) or by declaring const self = this; before the function. Additionally, as suggested in the comments, consider adding the code to the watch instead of computed. Remember that when using setInterval, you should clear the interval before starting a new one to avoid creating multiple intervals unintentionally. The same applies when using setTimeout. Here's a simplified example:

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

Another approach is to modify the watch using function:

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

Check out the SANDBOX

Answer 5

Answer №3

The reason for this is that the return of tutar is happening within a callback function. The ayristirilmisPara() function itself is not responsible for returning tutar.

It's crucial to actually return a value from a computed property in order for Vue to properly interpret what the value should be.

Additionally, it's important to avoid changing or mutating the underlying data values within a computed property as it can lead to headaches and bugs.

If you need to change data, use methods
If you need to modify the presentation of existing data, then use computed properties

Refer to the provided resources for more detailed explanations:

Vue School Computed Properties
Computed Properties and Watchers

Answer 6

The reason for this is that the return of tutar is happening within a callback function. The ayristirilmisPara() function itself is not responsible for returning tutar.

It's crucial to actually return a value from a computed property in order for Vue to properly interpret what the value should be.

Additionally, it's important to avoid changing or mutating the underlying data values within a computed property as it can lead to headaches and bugs.

If you need to change data, use methods
If you need to modify the presentation of existing data, then use computed properties

Refer to the provided resources for more detailed explanations:

Vue School Computed Properties
Computed Properties and Watchers

Using setInterval with Vue.js computed properties

Answer №1

Answer №2

Answer №3

Similar questions

Vue component fails to render on a specific route

Any suggestions on how to repair this Node.js login interface?

What is the procedure for altering the location of a mesh within the animate() function in three.js?

Is it possible to nest ng-repeat and access $first and $last properties simultaneously

Help me understand how to display the data in a JSON array

What is the process for resetting a function within an AJAX Response?

Creating a Union Type from a JavaScript Map in Typescript

Locating the JSON path within an object

Sending arguments with $emit is not defined

Calculating the v-model name dynamically within a v-for loop

Guidelines for leveraging AngularJS Decorators to deactivate a button within an Html document

Is there a way to generate a hierarchical list menu using strings?

CSS: elements that are only visible when positioned above specific elements

Looking for a way to convert this vue-router function into ECMAScript 2015 syntax

Screen content of a post request in Node.js

basic handler in expressjs using the PUT method along with jQuery ajax

Ways to verify every entered word without having to click a button

`I'm encountering issues when trying to pass an array through localStorage into a new array`

Change parent component state using a specific key-value pair

An elementary React project facing compilation issues