Скачать или смотреть Mastering Vue 3: Using Watchers on Props in Script Setup

Learn how to effectively use `watchers` on props in Vue 3 Script Setup to dynamically change CSS based on component state.
---
This video is based on the question https://stackoverflow.com/q/72660970/ asked by the user 'Lx45' ( https://stackoverflow.com/u/14220844/ ) and on the answer https://stackoverflow.com/a/72661017/ provided by the user 'Nikola Pavicevic' ( https://stackoverflow.com/u/11989189/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Using Watchers on props in vue3 Script Setup

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering Vue 3: Using Watchers on Props in Script Setup

Vue.js is a powerful framework for building user interfaces, and version 3 introduced several features that make coding even more intuitive, particularly with the Script Setup syntax. In this post, we will address a common issue developers face: how to properly utilize watchers on props within the Script Setup.

The Problem: Watching Props in Vue 3

Imagine you are developing a component in Vue 3 where you need to adjust the styling based on the state passed as a prop. For instance, if the state is "finished," you may want to add a specific CSS class. The original code demonstrated a common pitfall that many developers encounter when setting up watchers incorrectly.

Here is the problematic code snippet:

[[See Video to Reveal this Text or Code Snippet]]

In this code, the intent is clear, but the implementation does not work as expected. The main issue lies in how the watch function is being used.

The Solution: Correctly Setting Up Watchers

To resolve the issue, we need to adjust the way we watch the props.state property. Instead of directly passing props.state to the watch function, we should create a function that returns its value. The updated version looks like this:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Solution

Create a Getter Function:
By using an arrow function () => props.state, we ensure the watch API correctly tracks the prop's state instead of watching a fixed value.

Handling Changes:
The second argument of the watch function is a callback that receives two parameters: newValue and oldValue. This helps to monitor changes effectively.

Conditional Logic:
Inside the callback, we can implement any condition that dictates how the component should respond, in this case, changing the cardStatus value based on the new state.

Example Implementation in Context

Here is how your complete component would now look with the corrected watcher:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Utilizing watchers on props in Vue 3 can seem tricky at first, but with the proper setup, it becomes a powerful tool to create dynamic and responsive components. By restructuring the watcher to use a getter function, we ensure that our CSS updates as expected based on the prop's state.

This approach not only simplifies our logic but also enhances the overall maintainability of the component. Happy coding in Vue 3!