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

This article mainly introduces "how to solve the problem that the data update content of the vue parent component has not changed". In the daily operation, I believe that many people have doubts about how to solve the problem that the data update content of the vue parent component has not changed. The editor consulted all kinds of materials and sorted out a simple and useful operation method. I hope it will be helpful for you to answer the question of "how to solve the problem without changing the content related to vue parent component data update child component"! Next, please follow the editor to study!

The parent component data update child component related content does not change the parent component

In the parent component, v-for generates child components based on the data (array) given by the background

Subcomponents (existProject) {{itemprop.title}} {{status_tit}} number of copies collected: {{itemprop.asyncCount}} copies {{createtime}} Edit publish data to delete import axios from 'axios'export default {data () {w return {createtime:'' Status_tit:'', show2:true}}, props: ['itemprop'], methods: {turnEdit (id) {debugger Console.log (id) axios.defaults.headers.common ['token'] = JSON.parse (window.localStorage.getItem (' token')) axios.get ('/ question/'+id). Then (response = > {console.log (response); var obj = response.data.data; var contents = obj.contents For (let I = 0; I

< contents.length; i++){ obj.contents[i].component = this.$options.methods.initType(obj.contents[i].type) } console.log(obj) window.localStorage.setItem('workInfoList', JSON.stringify(obj)); this.$router.push({ path: '/edit', query: { id: id } }) _window.location.reload() }) .catch(error =>

{console.log (error)})}, turnSend (id) {debugger Console.log (id) axios.defaults.headers.common ['token'] = JSON.parse (window.localStorage.getItem (' token')) axios.get ('/ question/'+id). Then (response = > {console.log (response); var obj = response.data.data Console.log (obj) window.localStorage.setItem ('workInfoList', JSON.stringify (obj)) This.$router.push ({path:'/ sendProject' Query: {id: id}) _ window.location.reload () .catch (error = > {console.log (error)})} DelItem (id) {this.$confirm ('this operation will delete the file into the draft box, do you want to continue?', 'prompt', {confirmButtonText:'OK', cancelButtonText: 'cancel' Type: 'warning'}) .then () = > {axios.defaults.headers.common [' token'] = JSON.parse (window.localStorage.getItem ('token')) axios.delete (' / question/'+id) .then (response = > {console.log (response)) / / this.show2 = false this.$parent.getPage () )) .catch (error = > {console.log (error)})}, initType (str) {switch (str) {case 1:return 'Radio'; case 2:return' check'; case 3:return 'gapFill'; case 4:return' level' Case 5:return 'photoInput'; case 6:return' Rate'; case 7:return 'remark'; case 8:return' selectChoice'; case 9:return 'sort'; case 10:return' tableNumber'; case 11:return 'temp' },}, mounted () {/ / console.log (this.itemprop.createTime) var transformTime = new Date (this.itemprop.createTime) this.createtime = transformTime.toLocaleString (); console.log (this.createtime)},}

Because there are multiple pieces of data, there is paging processing, and the data appears normally on the first page, but after the second page of data is obtained and assigned to the data of the parent component, the information of the child component retains the information of the first page.

Solution: use watch deep snooping watch: {itemprop: {handler (NMago) {console.log (this.itemprop); var status = this.itemprop.status; var showCondition = this.itemprop.showCondition; / / debugger This.status_tit = (function (status,showCondition) {if (status==0) {return 'unreleased' } if (status==2 & & showCondition==1) {/ / released return 'collecting' } if (status==2 & & showCondition==0) {/ / pause return 'paused' } if (status==2 & & showCondition==-1) {/ / terminated return 'terminated' } if (status==2 & & showCondition==2) {/ / questionnaire release ends return 'finished';}) (status,showCondition)}, deep:true, immediate:true,}}

Watch can listen for changes in the data of sub-components. Arrays or objects need to listen in depth, and strings do not need to listen in depth, so that after the data is paged and switched, the original information will not be retained, but the new information.

Solution to the problem of non-updating of cyclic subcomponents

This is a bug of Element-UI, and the solution is to add a row-key property from el-table and set a field name for row-key that can be uniquely identified.

1. This can be the id field of the database

two。 Add a key of random numbers to table

At this point, the study on "how to solve the problem without changing the content of the vue parent component data update sub-component" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.