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