vue父组件数据更新子组件相关内容未改变问题(用watch解决)

父组件数据更新子组件相关内容未改变

父组件

在父组件中,根据后台给的数据(数组),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">收集份数:{{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>发布</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 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('此操作将删除该文件进入草稿箱, 是否继续?', '提示', {
            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>

因为有多条数据,所以有分页处理,在第一页中数据显示正常,但是在获得第二页数据并赋值给父组件的data后,子组件的信息保留的还是第一页的信息

解决方法,使用watch深度监听

    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 '未发布';
                    }
                    if(status==2 && showCondition==1)
                    {
                        // 已发布
                        return  '收集中';
                    }
                    if(status==2 &&showCondition==0)
                    {
                        // 暂停
                        return '已暂停';
                    }
                    if(status==2 &&showCondition==-1) {
                        // 终止
                        return '已终止';
                    }
                    if(status==2 &&showCondition==2) {
                        // 问卷发布结束
                        return '已结束';
                    }
                })(status,showCondition)
            },
            deep:true,
            immediate:true,
        }
    }

watch可以监听子组件的数据变化,数组或者对象要用深度监听,字符串什么的不用深度监听,这样就可以在分页切换数据后,就不会保留原有的信息,而是新的信息了

循环中子组件不更新问题

解决方法

这是Element-UI的一个bug,解决方案是从el-table中增加一个row-key属性,并为row-key设置一个能唯一标识的字段名。

1.这个可以是数据库的id字段

<el-table row-key="_id" ></el-table>

2.给table增加一个随机数的key

<el-table :key="Math.random()" ></el-table>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue 实现手动刷新组件的方法

    开发过程遇到了一个问题,就是我的 router-view 里面渲染出来的组件输入数据之后,我点击 路由视图外边的导航栏 router-link 按钮,可以实现清除 router-view 里面的数据,也就是使组件重新渲染.vm.$forceUpdate()这个方法可以使当前组件调用这个方法时,重新渲染组件.给 router-view 标签添加 key 属性将 key 绑定的值放在状态管理容器里面,通过 状态管理容器的 mutations 或者 actions 触发 key 值的变化,即可实现重新

  • vue项目刷新当前页面的三种方法

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

  • vue强制刷新组件的方法示例

    前言: 在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,这就需要我们手动进行强制刷新组件. 官网是这样说的: 可能你还不大理解,请继续往下看,下面是我的一个例子,来详细解说了这个方法的使用, 第一个打印结果 第二个打印结果 一.问题描述:父组件通过v-for渲染子组件,删除子组件数据出现异常. <code class="language-plain"><section v-if=

  • vue父组件数据更新子组件相关内容未改变问题(用watch解决)

    父组件数据更新子组件相关内容未改变 父组件 在父组件中,根据后台给的数据(数组),v-for生成子组件    <div class="exist">                     <existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click=&q

  • Vue父组件向子组件传值以及data和props的区别详解

    1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' }, 2.引用子组件 父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用. 把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上. <com1 :parentmsg="msg"></com1> 3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在pro

  • Vue中父组件向子组件传递数据的几种方法

    最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法. 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click="changeName('YYY')">{{name}}</div> </template> <script> export default{ props:['name'],//or

  • Vue父组件调用子组件函数实现

    Vue父组件调用子组件的函数 父组件通过事件调用子组件的函数.例如父组件通过 点击事件 让子组件发请求. 文章中的项目已经通过脚手架去创建. DEMO: Father.js <template> <div> <div> <son ref="son"></son> <input type="button" value="点击" @click="useSonFun"

  • 关于vue父组件调用子组件的方法

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法 例: 子

  • Vue父组件和子组件之间数据传递和方法调用

    vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性. 父组件向子组件传值(子组件主动获取父组件的数据和方法) 父组件import引用子组件 使用子组件时在子组件上添加一个v-bind属性,并绑定上数据 在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据 把接收到的数据在子组件中使用 子组件向父组件传值(父组件主动获取子组件的数据和方法) 子组件中需要发出该自定义

  • vue之父组件向子组件传值并改变子组件的样式

    问题描述:在做视频网站过程中发现每个视频的样式其实是大致相同的,所以就想着直接写个组件,但是又看不懂官网的传值,所以自己找了个视频看明白了. 想实现的效果: vue父组件向子组件传值具体实现代码: 父组件的代码: <!-- 注释的部分是之前没有用组件的代码 --> <!-- <ul class="videoList"> <li v-for="item in videoList" :key="item.id" c

  • Vue中父组件向子组件通信的方法

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s

  • vue的props实现子组件随父组件一起变化

    本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下 类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据.每当父组件的数据变化时,也会传导给子组件: <div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></c

  • vue父组件向子组件(props)传递数据的方法

    vue页面结构 在做项目的时候常常有这样的一个情况,这个页面的数据(比如:id号)要带到另一个页面去查询某个数据的详情等,传统的作法不是在url上加参数,cookie或者是现在H5的"sessionStorage"和"localStorage"上赋值,这是页面之间传递的方法. 随着Angularjs,React,Vue的流行组件式的开发方式成为另一种不错的解决方案. 最近就有一些小伙伴问我,vue组件之间是如何传递参数的?其实vue是有三种方式可以组件之间传递数据(

随机推荐