vue父組件數(shù)據(jù)更新子組件相關內容未改變問題(用watch解決)
更新時間：2022年03月25日 14:50:59 作者：liuarmyliu
這篇文章主要介紹了vue父組件數(shù)據(jù)更新子組件相關內容未改變問題(用watch解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
父組件數(shù)據(jù)更新子組件相關內容未改變
父組件
在父組件中，根據(jù)后臺給的數(shù)據(jù)（數(shù)組），v-for生成子組件
? ?<div class="exist">? ? ? ? ? ?? ? ? ?? ?<existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click="sendIdTogetData(index)" v-show="true"></existProject> ?? ?</div>
子組件（existProject）
<template>
?<!-- <transition name="el-zoom-in-center"> -->
? <div class="existProjectBox" v-show="show2">
? ? ? <div class="existContentBox">
? ? ? ? ? <div class="existContent">
? ? ? ? ? ? ? <div class="existTitle">{{itemprop.title}}</div>
? ? ? ? ? ? ? <div class="stateBox">
? ? ? ? ? ? ? ? ? <span class="state">{{ status_tit }}</span>
? ? ? ? ? ? ? ? ? <span class="number" v-if="itemprop.status==2">收集份數(shù)：{{itemprop.asyncCount}}份</span>
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <div class="tiemBox">
? ? ? ? ? ? ? ? ? {{createtime}}
? ? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? </div>
? ? ? <div class="existButton">
? ? ? ? <li v-if="itemprop.status==0" @click="turnEdit(itemprop.qid)">
? ? ? ? ? ? <i class="icon icon-edit"></i>
? ? ? ? ? ? <span>編輯</span>
? ? ? ? </li>
? ? ? ? <li v-if="itemprop.status==0" @click="turnSend(itemprop.qid)">
? ? ? ? ? ? <i class="icon icon-send"></i>
? ? ? ? ? ? <span>發(fā)布</span>
? ? ? ? </li>
? ? ? ? <li v-if="itemprop.status==2 ">
? ? ? ? ? ? <i class="icon icon-data"></i>
? ? ? ? ? ? <span>數(shù)據(jù)</span>
? ? ? ? </li>
? ? ? ? <!-- <li v-if="itemprop.status==2 ">
? ? ? ? ? ? <i class="icon icon-data"></i>
? ? ? ? ? ? <span>暫停</span>
? ? ? ? </li>
? ? ? ? <li v-if="itemprop.status==2 ">
? ? ? ? ? ? <i class="icon icon-data"></i>
? ? ? ? ? ? <span>終止</span>
? ? ? ? </li> -->
? ? ? ? <li @click="delItem(itemprop.qid)">
? ? ? ? ? ? <i class="icon icon-other"></i>
? ? ? ? ? ? <span>刪除</span>
? ? ? ? </li>
? ? ? </div>
? </div>
?<!-- </transition> -->
</template><script>
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('此操作將刪除該文件進入草稿箱, 是否繼續(xù)?', '提示', {
? ? ? ? ? ? confirmButtonText: '確定',
? ? ? ? ? ? cancelButtonText: '取消',
? ? ? ? ? ? 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)
? ? },
}
</script>因為有多條數(shù)據(jù)，所以有分頁處理，在第一頁中數(shù)據(jù)顯示正常，但是在獲得第二頁數(shù)據(jù)并賦值給父組件的data后，子組件的信息保留的還是第一頁的信息
解決方法,使用watch深度監(jiān)聽
? ? watch:{
? ? ? ? itemprop:{
? ? ? ? ? ? handler(n,o){?
? ? ? ? ? ? ? ? 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 '未發(fā)布';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(status==2 && showCondition==1)
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? // 已發(fā)布
? ? ? ? ? ? ? ? ? ? ? ? return ?'收集中';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(status==2 &&showCondition==0)
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? // 暫停
? ? ? ? ? ? ? ? ? ? ? ? return '已暫停';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(status==2 &&showCondition==-1) {
? ? ? ? ? ? ? ? ? ? ? ? // 終止
? ? ? ? ? ? ? ? ? ? ? ? return '已終止';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(status==2 &&showCondition==2) {
? ? ? ? ? ? ? ? ? ? ? ? // 問卷發(fā)布結束
? ? ? ? ? ? ? ? ? ? ? ? return '已結束';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })(status,showCondition)
? ? ? ? ? ? },
? ? ? ? ? ? deep:true,
? ? ? ? ? ? immediate:true,
? ? ? ? }
? ? }watch可以監(jiān)聽子組件的數(shù)據(jù)變化，數(shù)組或者對象要用深度監(jiān)聽，字符串什么的不用深度監(jiān)聽，這樣就可以在分頁切換數(shù)據(jù)后，就不會保留原有的信息，而是新的信息了
循環(huán)中子組件不更新問題
解決方法
這是Element-UI的一個bug，解決方案是從el-table中增加一個row-key屬性，并為row-key設置一個能唯一標識的字段名。
1.這個可以是數(shù)據(jù)庫的id字段
<el-table row-key="_id" ></el-table>
2.給table增加一個隨機數(shù)的key
<el-table :key="Math.random()" ></el-table>
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了ElementUI對table的指定列進行合算，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-03-03
本文主要介紹了Vuex模塊化實現(xiàn)待辦事項的狀態(tài)管理的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了如何在Vue項目中使用vuex問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解el Cascader懶加載數(shù)據(jù)回顯示例
這篇文章主要為大家介紹了詳解el Cascader懶加載數(shù)據(jù)回顯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
今天小編就為大家分享一篇微信內置開發(fā) iOS修改鍵盤換行為搜索的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue.js添加組件操作,結合實例形式分析了vue.js組件的注冊、調用相關操作技巧,需要的朋友可以參考下2018-06-06
表單校驗是注冊環(huán)節(jié)中必不可少的操作,表單校驗通過一定的規(guī)則來確保用戶提交數(shù)據(jù)的有效性,下面這篇文章主要給大家介紹了關于el-form表單驗證的一些實用方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue使用swiper問題(5.2.0版本,避免踩坑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文通過基本實例給大家介紹了vue計算屬性和監(jiān)聽器的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
有些業(yè)務需求需要點擊按鈕復制鏈接,下面這篇文章主要給大家介紹了關于vue中如何實現(xiàn)復制內容到剪切板的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10