我正在使用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
  }
},

07-24 17:30