Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to solve Vue.$set failure", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to solve Vue.$set failure problem" article.

Vue.$set failure

There is such a requirement to add data filtering with controls on the left, selection in the middle, conditions on the right, values on the right.

Because different value option controls are rendered according to different controls

{props: {props: {type: Object, default: () = > ({prop: "prop", value: "value", type: "type"})}}, data () {return {data: {}}, methods: {onValueChange (val) {this.$set (this.data, this.props.value) Val)}} / /.} code snippet

Due to the uncertainty of the control ID, all data can not be preset in advance and key can not respond naturally, so this.$set is used to dynamically add data in onValueChange to realize the response.

It can be found that the data in the value input box can not respond in real time.

Obviously used $set but can not respond to some investigation and found that as long as the value value cannot respond after switching the control, but as long as you enter something before switching, it will be no problem.

After another investigation, it was found that

Troubleshooting after deleting @ change event

The problem occurs when data [props.value] = ""

Then check the Vue source code

/ / vue/src/core/observer/index.js source code snippet / * Set a property on an object. Adds the new property and * triggers change notification if the property doesn "t * already exist. * / export function set (target: Array | Object, key: any, val: any): any {if (process.env.NODE_ENV! = = "production" & & (isUndef (target) | | isPrimitive (target)) {warn (`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)} `)} if (Array.isArray (target) & & isValidArrayIndex (key)) {target.length = Math.max (target.length, key) target.splice (key, 1) Val) return val} if (key in target & &! (key in Object.prototype)) {target [key] = val return val} const ob = (target: any). _ _ ob__ if (target._isVue | | (ob & & ob.vmCount)) {process.env.NODE_ENV! = = "production" & & warn ("Avoid adding reactive properties to a Vue instance or its root $data" + "at runtime-declare" It upfront in the data option. ") return val} if (! ob) {target [key] = val return val} defineReactive (ob.value) Key, val) ob.dep.notify () return val}

You can find that if you judge whether key exists in the object before defineReactive, if it exists, it skips it.

The pit flipped through the Vue.$set documents many times and did not find that $set could not add monitoring objects to the existing key.

Delete data [props.value] = "" and change it to onValueChange ("") to solve the problem perfectly

The above is about the content of this article "how to solve the problem of Vue.$set failure". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.