vue 父组件通过ref调用子组件方法 更新数据后,视图不更新

vue 父组件通过ref调用子组件方法 更新数据后,视图部更新

而在子组件mounted(){}里调用统一方法可以更新

vue版本2.5.15

parent.vue

this.$nextTick(() => {
        this.$refs.carInfo.getDetail(data)
      })

child.vue

data () {
    return {
      imgUrl: '',
      plate_number: '',
      car_detail: {
        serial_number: '',
        plate_type: '',
        china_brand: '',
        model: '',
        car_type: '',
        color: '',
        use_for: '',
        inspection_date: ''
      },
      car_owner: {
        name: '',
        identification_number: '',
        quasi_drive_type: '',
        expire_date: '',
        cumulative_score: '',
        license_status: ''
      },
     }
    },
methods: {
    getetail(){
        this.obj = res.content // 这里父组件$refs.name.getDetail()调用时控制台数据改变但是视图没变
    }
},
 beforeUpdate () {
    console.log('before update', this.$data)
  },
  updated () {
    console.log('update', this.$data)
  },
mounted(){
    // setTimeout(() => { 这里调用可以更新视图
        // this.getDetail()
        // }, 3000)
    }

clipboard.png

用Vue.$set(...), 也不起作用

阅读 11.6k
7 个回答
this.$nextTick(() => {
        this.$refs.carInfo.getDetail(data)
      })

这段代码,在什么时候被调用的呢?

getetail(res){//是不是少了参数
    this.obj = res.content 
}

obj的属性没有显示的初始化导致的吧如果子组件的obj直接定义的、

data(){
    return{
        obj:{}
    }
}

你通过调用方法改变obj是不会将obj的属性设置成响应式的,vue检测不到,你应该预先给出需要动态变化的属性
data(){

    return{
        obj:{
            a:'',
            b:''
        }
    }
}
新手上路,请多包涵

vue不会检测到 数组或者对象 数据的改变,

this.$set(object, key, value) //对象
this.Array.push({ message: 'Baz' })  // 数组

文档地址
官方文档

image.png可能是key值的问题,不要使用时间戳,我将父组件的key值改为index就好了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题