CODEWITHSUNDEEP
javascriptvue.js
Sock Monkey
Sock Monkey

Reputation: 333

Running a function when conditions are met?

I'm building an application using Vuex and i'm not sure how to run a function when my data object meets a few user defined conditions.

<template>
 <swiper-slide v-for="(photon,key) in this.$store.state.photons" :key='key'>
  <ul>
   <li><label for="tempAlert">Temp exceeds</label><input v-model="photon.user.tempAlert" type="number"></li>
   <li><datetime type='datetime' v-model="photon.user.alertTime" use12-hour auto class="theme-orange">
    <label for="alertTime" slot="before">Notify at</label></datetime></li>
  </ul>
 </swiper-slider>
<template>


<script>
methods:{
  photonAlert(photon) {
    if(
      photon.user.alertTime>=new Date() &&
      photon.user.tempAlert>=photon.data.tempF[photon.data.tmepF.length-1][1]
    ) {
        this.sendnotification(photon)
      }
    },
  }
</script>

What is the proper way to go about watching for changes and running a function when conditions are met?

Upvotes: 0

Views: 56

Answers (1)

Sami Hult
Sami Hult

Reputation: 3082

Vue has a facility for this, watch:

watch: {
  photon: function (photon) {
    if(...
  },

As Jeff pointed out in comments, you are handling an object and may need to use deep: true to catch changes:

watch: {
  photon: {
    handler: function (photon) { if(... },
    deep: true
  }
},

Upvotes: 1

Related Questions