满足条件时运行功能？

Question

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?

Answer 1

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
  }
},