Problem with boolean in setInterval - vuejs

Question

Problem with boolean in setInterval - vuejs

Navigation

#1 by (0 votes)
#2 by (-1 votes)

-1

I have a boolean called isFilter in which when it is true it does one function and if not the other function. This I have in the created so that every 30 seconds I return to execute the function:

created() {
  this.load();
  setInterval(() => {
    if (this.isFilter) {
      this.filterVehicle();
    } else {
      this.load();
    }
  }, 30000);
},

When I activate the isFilter to true on a button, that is:

this.isFilter = true;

If you call the function in this case this.filterVehicle(); , all right but the problem is when the 30 seconds pass and then run again then execute the function: this.load(); I do not know why that happens since the state is supposed to follow in True and each time it recharges it should go through the true condition? Is something missing? since you should always reload maintaining the Boolean state to know what function to execute.

** UPDATE: **

data() {
  return {
    isFilter: false,
  };
},

The error is in this part:

methods: {
  filterVehicle() {
    if (!this.isFilter) {
      this.isFilter = true;

    } else {
      this.isFilter = false;
      this.load();
    }
  },
}

and the button where I send to call the function filterVehicle

 <button class="button" :class="isFilter ? 'is-danger': 'is-primary'" @click="filterVehicle">
 <span v-if="isFilter" class="icon"><i class="fa fa-cancel"></i></span>
 <span v-else class="icon"><i class="fa fa-search"></i></span>
 </button>

Where when you click on the filter button it changes its status to true and changes the icon to X so when you click on the X remove the filter this works but the problem I have is how to handle those states with the setInterval because when you update this, it returns to execute the function and as the state is now in true it happens to bring the LOAD how could I do the same without losing the filter when I run the function again with the setInterval ??

javascript vue.js setinterval

asked by Piero Pajares 22.04.2018 в 15:27

source

2 answers

-1

You must change this line of code:

data() {
  return {
    isFilter: false,
  };
},

For this:

data: {
    isFilter: false
},

answered by 22.04.2018 в 17:06

How to close a modal window automatically? how do I make a pile of objects in java? what I want to put is identifier and color

score 0 · Accepted Answer

Well I do not like the way I solved it but in this way it's working:

First I had to create 2 functions to filter and one to remove:

methods: {
  filterVehicle() {
    this.isFilter = true;
  },
  removeVehicle() {
    this.load();
    this.isFilter = false;
  },
}

and simply in my view I simply play with the boolean and the v-if of vue:

<button v-if="!isFilter" class="button is-primary" @click="filterVehicle">
 <span class="icon"><i class="fa fa-search"></i></span>
</button>
<button v-else class="button is-danger" @click="removeFilter">
<span class="icon"><i class="fa fa-cancel"></i></span>
</button>

This way it works but if there are other ideas it would be better: D