Почему при передаче вычисляемого свойства в пользовательскую директиву в качестве параметра оно не передаётся заново при измении?

Question

[Fastor1us]

Компонент:

<template>
  <div>
    <h1>Страница с постами</h1>
    <PostList :posts="posts" v-if="!isPostsLoading" />
    <div v-else>Идёт загрузка...</div>
    {{ isIntersectCondition }}
    <div v-intersection="isIntersectCondition" class="observer"></div>
  </div>
</template>

<script>
import axios from 'axios';
import PostList from '@/components/PostList.vue';
export default {
  name: 'Posts',
  components: { PostList },
  data() {
    return {
      posts: [],
      isPostsLoading: false,
      page: 1,
      limit: 10,
      totalPages: 0,
    }
  },
  methods: {
    async fetchPosts() {
      try {
        this.isPostsLoading = true
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts', {
          params: {
            _page: this.page,
            _limit: this.limit
          }
        })
        this.totalPages = Math.ceil(response.headers['x-total-count'] / this.limit)
        this.posts = response.data
      } catch (e) {
        console.log('Ошибка получения данных от сервера');
      } finally {
        this.isPostsLoading = false
      }
    },
    async loadMorePosts() {
      try {
        this.page += 1;
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts', {
          params: {
            _page: this.page,
            _limit: this.limit
          }
        })
        this.totalPages = Math.ceil(response.headers['x-total-count'] / this.limit)
        this.posts = [...this.posts, ...response.data]
      } catch (e) {
        console.log('Ошибка получения данных от сервера');
      }
    }
  },
  mounted() {
    this.fetchPosts()
  },
  computed: {
    isIntersectCondition() {
      return this.page < this.totalPages;
    },
  },
}
</script>

<style>
</style>

Пользовательская директива v-intersection:

export default {
  name: 'intersection',
  mounted(el, binding) {
    const options = {
      rootMargin: "0px",
      threshold: 1.0,
    };
    const callback = (entries) => {
      if (entries[0].isIntersecting) {
        console.log(binding.value);
      }
    };
    const observer = new IntersectionObserver(callback, options);
    observer.observe(el)
  }
}

В директиву v-intersection я передаю вычисляемое (computed) свойство isIntersectCondition.
В директве при пересечении с элементом вывожу его в консоль: console.log(binding.value);
При срабатывании директива всегда выводит в консоль false, даже когда isIntersectCondition = true (после выполнения fetch запроса isIntersectCondition меняется с false на true), но в директиву всё так же попадает false.

Если заменить хук жизненного цикла директивы с mounted на updated, то в случае изменения isIntersectCondition будет приходить его новое значение. Но проблема в том, что updated срабатывает многократно.

Подскажите правильное решение. Как передавать в пользовательские директивы аргументы которые могут менять своё значение по ходу работы программы. Мне нужно что бы моя директива, в случае изменения получаемой переменной в качестве аргумента, получала её новое значение

Comments

[modelair]

mounted отрабатывает на стадии рисования в DOM, тебе нужен именно updated.

Answer 1

[GeminiX]

наверное это изврат, но попробуйте передать функцию, а не назначение

isIntersectCondition() {
      return () => this.page < this.totalPages;
    },

вызвать функцию
console.log(binding.value());