Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Vue3 composition API make the watcher work immediately

Using Vue3 composition API. How do I make watched to work immediately. The following code doesn't work.

watch((immediate=true) => props.isOpen, () => {
        if (props.isOpen && props.preventBackgroundScrolling) {
          document.body.style.setProperty('overflow', 'hidden')
        } else {
          document.body.style.removeProperty('overflow')
        }

          });
like image 835
user3541631 Avatar asked Nov 30 '20 08:11

user3541631


People also ask

How do I watch props in composition API?

To watch props change with Vue Composition API and Vue 3, we can use the watch function. to call watch to watch the selected prop. We get the latest and previous value of it from the parameters in the 3rd argument.

How does watch work in Vue?

The Vue. js Watcher or watch property allows the developers to listen to the component data and run whenever they change a particular property. The watcher or watch property is a unique Vue. js feature that lets you keep an eye on one property of the component state and run a function when that property value changes.

What is vue3 composition API?

Vue 3 introduced Composition API which allows developers to write components in a better way. Using this API, developers can group the logical pieces of code together, which in turn helps write readable code. Composition API is a built in feature in Vue 3 and is also available in Vue 2 via @vue/composition-api plugin.

What is the Vue watch API?

The watch API is part of the larger Vue Composition APIs. Learn how to track data changes in Vue 3 applications and much more. The watch API is part of the larger Vue Composition APIs.

What is the composition API in VUE 3?

Vue 3 comes with the Composition API built-in. It lets us extract logic easily an not have to worry about the value of this in our code. It also works better with TypeScript because the value of this no longer has to be typed. In this article, we’ll look at how to create Vue 3 apps with the Composition API.

Is it possible to use options API in VUE 3?

Before Composition API was introduced, Vue 2 was using Options API. While developers can still use Options API in Vue 3, the problem with it is that one single topic would be fragmented across different options such as data () or props, certain methods, some lifecycle hooks ( mounted (), created (), and more), and watchers ( watch ).

How to watch for changes in reactive properties in VUE 3?

The watch function in the Vue 3 composition API is the same as Vue 2’s this.$watch method or the watch option. Therefore, we can use it to watch for changes in reactive properties.


Video Answer


1 Answers

It should placed as option :

watch(() => props.isOpen, () => {
        if (props.isOpen && props.preventBackgroundScrolling) {
          document.body.style.setProperty('overflow', 'hidden')
        } else {
          document.body.style.removeProperty('overflow')
        }

          },{immediate:true});

or

watch('props.isOpen', () => {
        if (props.isOpen && props.preventBackgroundScrolling) {
          document.body.style.setProperty('overflow', 'hidden')
        } else {
          document.body.style.removeProperty('overflow')
        }

          },
       {immediate:true}
   );

like image 154
Boussadjra Brahim Avatar answered Nov 15 '22 12:11

Boussadjra Brahim