javascript - 满足条件时运行功能？

我正在使用Vuex构建应用程序，并且不确定我的数据对象满足一些用户定义的条件时如何运行函数。

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

满足条件时，观察更改和运行功能的正确方法是什么？

最佳答案

Vue为此提供了一个设施，watch：

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

正如Jeff在评论中指出的那样，您正在处理一个对象，可能需要使用deep: true来捕获更改：

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