current position:Home>In vue3 setup, the data change of the object cannot be observed by the watch, and the reason is unknown
In vue3 setup, the data change of the object cannot be observed by the watch, and the reason is unknown
2022-02-02 21:10:56 【CSDN Q & A】
The phenomenon and background of the problem
Vue3 setup in watch No data changes were detected for the object
Problem related code , Do not paste screenshots
**father.vue**setup() { let testMsgObj = reactive({ person1: { name: 'person1', age: 41, }, person2: { name: 'person2', age: 42, }, }) let testMsg = testMsgObj.person1 const handleSetLineChartData = () => { testMsg = testMsgObj.person2 console.log(testMsg) } return { testMsg, }}**child.vue**props: { testMsg: Object},setup(props) { let { testMsg } = props watch( () => testMsg, (val) => { console.log('testMsg---', val) },{ deep: true })}
Operation results and error reporting contents
Can't see testMsg Data change
My solution ideas and tried methods
What I want to achieve
hope watch Can monitor testMsg become peson2 The data of Now I only see Parent component testMsg Changed the watch It didn't print out It means that no data change is monitored
Refer to the answer 1:
watch It is generally used to monitor the changes of routing parameters .
Refer to the answer 2:
Refer to the answer 3:
let { testMsg } = toRefs(props)
Refer to the answer 4:
Refer to the answer 5:
reacrive The data of , You deconstruct and take data from it , It's not responsive .
have to torefs() Turn around
Refer to the answer 6:
Refer to the answer 7:
Two things to note :
- 1.watch Listening is responsive data , The original data testMsg It's not responsive , to testMsg add ref That's all right. ;
- 2. In obtaining props Do not use deconstruction .
// Parent component let testMsg = ref(testMsgObj.person1);const handleSetLineChartData = () => { testMsg.value = testMsgObj.person2; };
// Child components watch(() => props.testMsg,(val) => { console.log("-----", val); }, { deep: true } )
Refer to the answer 8:
copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.primo.wiki/2022/02/202202022110534159.html
The sidebar is recommended
- Oracle12c invalid create index option
- If the folder of pod in k8s is mounted with data volume (persistent), the pod cannot be started. How to solve it?
- I want to ask what's wrong!
- Problems related to C language selection structure if else
- KeyError: 'ConvWS is already registered in conv layer'
- On the problem of C language: prime is a number that has no other factors except 1 and itself
- Dev C + + automatically generates an ostream after compilation?
- C language: input a character from the keyboard to judge whether it is an English letter.
- Python uses function to find factorial of 0-5 points
- C language wants to insert new data into an array structure with only three elements, but on the one hand, it is garbled. On the other hand, it cannot judge the value of N and return it
guess what you like
-
The computer disk space is lost, and the actual used space is inconsistent with the displayed space
-
Is there a price for debugging java code
-
Read in an integer m and calculate the value of the following formula
-
About idea, it doesn't work
-
C language choice sorting primary questions, the number after the first sorting exchange position becomes 0
-
Programming with C language to find the Y power of X
-
'request 'object has no attribute' type 'error
-
There is no prompt for idea to write Python code
-
On the test of Fibonacci sequence
-
I set div to 100% in CSS, but it is not 100%. How should I solve it
Random recommended
- On Vue select
- How to configure the post request size in the tomcat7 plug-in of Maven in idea
- Java random numbers are sorted in the array
- The problem of is and memory address in Python
- Save min, ask for an answer, ask for an answer.
- New Ajax options {onsuccess} migration core in MVC
- If you have any questions, the form will automatically crawl and fill in the information of another form
- Iot-dc3 drivers cannot be started. What is the problem and whether the configuration needs to be changed
- How to lay a good foundation for C language?
- Sqlstate [42s02]: base table or view not found: 1146 table 'com system_ node' doesn't exist
- The edge search function cannot be used
- Recursive program running error, is there a maximum limit for recursion?
- Why does the integer 1000 become 1 after excel & merges the cell contents,
- Openstack cloud platform APL operation and maintenance development
- Output the node of X in the binary tree
- Questions about Java: kettle related
- PHP class members, construction and encapsulation
- Vue develops Gaode map, clicks the map to obtain the longitude and latitude, but fails to obtain the information with inverse geocoding, and returns invalid_ USER_ SCODE
- *PTR is a value and a is a pointer. How can they be equal? Shouldn't it be * PTR = & A?
- How to solve this problem?
- Specify local time to run code?
- How is the notification message implemented in Android studio app?
- Why is a < B short circuited?
- Usually in face recognition, what operations do we need to do (such as division)? How many times does each operation need to be done? What is the data specification of the operation?
- Firefox browser of win10 system is not connected to the Internet
- Must JNA load DLL be an absolute path? The relative path will report an error every time it is loaded lang.UnsatisfiedLinkError
- Server error in '/ CMS parameters' application.
- The MAC installs windows virtual machine and QT reports an error
- On string array as function parameter
- How to figure out HTML5
- What is the specific idea to realize the comment function
- The number of occurrences of certain fields in SQL query
- Programming with eclipse Java
- Get function usage, how to use, high adoption rate
- MNIST dataset with KNN algorithm
- The so-called palindrome number is the same number from left to right and from right to left. For example, 121 is a palindrome number. Write a program to find the number of palindromes that can be divided by 3 in the range of 100-m. (can anyone see where
- Solve the problem of binding this point in anti chattering throttling
- Find the factorial of 0-5 by function
- JSP get the current URL parameter
- Why did you output more