2020-02-14 Vue项目中数据更新但无法刷新视图

IMG_2898.jpg IMG_2899.jpg

如图所示，点击 最热评论/最新 相互切换，请求接口获取不同的参数，正常情况来说vue的视图层会根据数据的变化而变化，但我这没有任何变化，打印数据得知按钮切换，数据的确是变化了。
此时分析代码：

<template>
    <div class="activityDetailRoot">
        <div class="ad-container" ref ='boxScroll' id="ad">
            <mt-loadmore  v-if="!hasErr && isInit" :bottom-method="loadBottom" :autoFill="false" @bottom-status-change="handleBottomChange"
                         :bottom-all-loaded="allLoaded" ref="loadmore" class="load-root" :top-method="loadTop">
                <MediaCover v-for="(media,index) in medias" :key="index" :content="media" :isShowBd="index > 0">
                </MediaCover>
                <CubeTopicAnswer :content="content" :tabs="['帖子','问答']" :isTopic="false" ref='cubeTopicAnswer'
                    @didSelectTab='didSelectTabValue' :show="show" @changeHotOrNew="changeHotOrNew"></CubeTopicAnswer>
                <div slot="bottom" class="mint-loadmore-bottom">
                    <span v-if="allLoaded">已经到底了</span>
                    <span v-else-if="bottomStatus === 'loading'">加载更多中...</span>
                    <span v-else>上拉加载更多</span>
                </div>
            </mt-loadmore>
        </div>
        <WriteBar v-if="!hasErr"
                  class='bottomBar'
                  :num = 'showNum'
                  :placerHolderText = 'placerHolderText'
                  @gotoSendPostView='showInputType()'></WriteBar>
        <SendCommentsItem
                          class='sendPostView'
                          ref='sendPostView'
                          v-show='showInputView &&!hasErr'
                          @hideView='hideInputView'
                          :isTopic='isPost'
                          :dataList = 'topicList'
                          @sendCommnentAction='sendPost' >
        </SendCommentsItem>
        <ErrPage v-if="hasErr"
                 @retry="getPageData"></ErrPage>
    </div>
</template>

上述代码中 <CubeTopicAnswer/> 就为图中的列表数据。 这里传递数据的方式是 父传子，通过props 来传递列表数据 content
查阅资料发现 如果是异步加载获取到的数据能正常传到子组件中，但是不会重新渲染加载。
此时就需要用到 watch函数了
以下是解决方案

watch:{
            content(newValue,oldValue){
                if(newValue){
                    console.log(newValue,'监听newValue')
                    this.content = newValue
                }
            }
        }

此时就可以解决视图不更新的问题了