当放置在 function 中时，突变观察器不观察元素

Question

一旦 cripClient 元素加载到页面，我试图将liveChatAvailable值设置为 true 并将isLoading值设置为 false。

当观察者 object 在 function 内时， if (crispClient)代码永远不会运行。

经过一些研究，它似乎与需要异步的代码有关，但我真的不知道如何 go 所以向正确的方向推动会很棒。

更新：我让 mixin 在mounted()上运行代码，而不是在组件内部执行代码，以查看这是否会有所作为，但事实并非如此。

LiveChatAvailability.js

  export const LiveChatAvailability = {
    data() {
      return {
        isLoading: true,
        liveChatAvailable: false
      }
    },
  
    methods: {
      setLiveChatAvailability() {      
        
        const crispClient = document.querySelector('.crisp-client');
        const observer = new MutationObserver((mutations, obs) => {
          if (crispClient) {
  
            this.loading = false;
            this.liveChatAvailable = true;

            obs.disconnect();
            return;
          }
  
          observer.observe(document, {
            childList: true,
            subtree: true
          });
        });
      }
    }
  } 

LiveChatButton.vue

<template>
  <button v-if="liveChatAvailable" @click.prevent="liveChatTrigger">Start a live chat now</button>
</template>

<script>
import {LiveChatAvailability} from '../../../../../public_html/assets/src/js/Vue/Mixins/LiveChatAvailability';
export default {
  mixins: [
    LiveChatAvailability
  ],
  created() {
    this.setLiveChatAvailability();
  },
  methods: {
    liveChatTrigger() {
      if (window.$crisp) {
        window.$crisp.push(['do', 'chat:open']);
      }
    }
  },
}
</script>

Answer 1

将 crispClient const 放在 MutationObserver 代码中允许它工作。

  export const LiveChatAvailability = {
    data() {
      return {
        isLoading: true,
        liveChatAvailable: false
      }
    },
  
    methods: {
      setLiveChatAvailability() {      
        
        
        const observer = new MutationObserver((mutations, obs) => {
          if (crispClient) {

            const crispClient = document.querySelector('.crisp-client');
  
            this.loading = false;
            this.liveChatAvailable = true;

            obs.disconnect();
            return;
          }
  
        });

          observer.observe(document, {
            childList: true,
            subtree: true
          });
      }
    }
  }