Subscribe on changes!

在IntersectionObserver 的回调函数中,set 响应式绑定值时无效(set reactive value in the IntersectionObserver's callback not work, while which is binding with element)

avatar
jaycethanks
Sep 27th 2022

Vue version

3.2.38

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-upumrk?file=src/App.vue

Steps to reproduce

滚动页面到底部，看见红色border矩形元素时, 应该触发 “refresh” 这个函数

What is expected?

当响应式值变量绑定指 Dom 元素时， IntersectionObserver 的回调函数中触发变动时, 值应当更新， 视图应当发生变化。

What is actually happening?

IntersectionObserver 的回调函数中触发变动时, 当响应式变量绑定至 元素，且这样去改变时

 bindKey.value = new Date().getTime().toString();

refresh 函数将不会触发，且视图不会更新。

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 12.24 GB / 31.26 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 105.0.1
  npmPackages:
    vue: ^3.2.38 => 3.2.38

Any additional comments?

No response

avatar
edison1105
Sep 27th 2022

It works fine without v-animate. see playground

avatar
jaycethanks
Sep 27th 2022

It works fine without v-animate. see playground

seems not work with the playground you link .

avatar
edison1105
Sep 27th 2022

image

What is ur expected?

avatar
jaycethanks
Sep 27th 2022

image

What is ur expected?

this only trigger once while loaded page, the refresh funciton should call every time while the page scroll to the bottom. you can comment the line6 bindKey.value=xxxx to see how "trigger" log out, that should be the normal action.

avatar
edison1105
Sep 27th 2022

ok, I see. the target.value will be set as a new element every time bindKey changed So, you need to observe the new element again.

avatar
jaycethanks
Sep 27th 2022

Thanks that you’ve solved my puzzle

获取 Outlook for iOShttps://aka.ms/o0ukef

发件人: edison @.> 发送时间: Tuesday, September 27, 2022 11:39:07 AM 收件人: vuejs/core @.> 抄送: Zhongyi Sun @.>; Author @.> 主题: Re: [vuejs/core] 在IntersectionObserver 的回调函数中,set 响应式绑定值时无效(set reactive value in the IntersectionObserver's callback not work, while which is binding with element) (Issue #6762)

ok, I see. every time bindKey changed target.value will be set as a new element. So, you need to observe the new element again.

― Reply to this email directly, view it on GitHubhttps://github.com/vuejs/core/issues/6762#issuecomment-1258926573, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AKSU6B3LQGNH3D4DZ27QP4DWAJT5XANCNFSM6AAAAAAQWJZZKE. You are receiving this because you authored the thread.Message ID: @.***>

GitHub Track