【vue】props里的值赋值给data

相信大家都知道vue的组件传值
如果不懂可以看一下这篇文章
文章地址
我要解决的是传过来的值如何通过vue生命周期函数在方法里使用,今天我解决了这个问题花了一两个小时,原本以为是监听器和计算属性没有起作用,原来是生命周期函数的原因
在这里插入图片描述
原来的函数

 watch:{
    blogId(val){
      //当a值变化时
      this.id = val
    }
  },
    methods: {
    loadMessage() {
      console.log("loadMessage()"+this.id)
      this.$axios.get("/comments/preview/"+this.id).then(res => {
        console.log(res.data)
        if(res.data.code==200){
          this.messages = res.data.data
        }
      })
    },
    cancel() {
      this.dialogFormVisible = false;
      this.entity = {};
    },
    reReply(id) {
      this.dialogFormVisible = true;
      this.entity.parentId = id;
    },
    reply() {
      this.entity.content = this.entity.reply;
      this.save();
    },

    save() {
      if (!this.user.username) {
        this.$message({
          message: "请登录",
          type: "warning"
        });
        return;
      }
      if (!this.entity.content) {
        this.$message({
          message: "请填写内容",
          type: "warning"
        });
        return;
      }
      this.$axios.post("/comments/addpreview", this.entity).then(res => {
        if (res.code === '0') {
          this.$message({
            message: "评论成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
        this.entity = {}
        this.loadMessage();
        this.dialogFormVisible = false;
      })
    },
    del(id) {
      this.$axios.delete("/comments/delete" + id).then(res => {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.loadMessage()
      })
    }
  },
    created() {
    this.user = sessionStorage.getItem("userinfo") ? JSON.parse(sessionStorage.getItem("userinfo")) : {};
      this.loadMessage();
  },

我这里将这个loadmessage方法写入了created里在创建这个页面时,从父组件加载数据就加载不进了,axios函数就接受不到这个值

解决方法

  created() {
    this.user = sessionStorage.getItem("userinfo") ? JSON.parse(sessionStorage.getItem("userinfo")) : {};
  },
  updated() {
    this.loadMessage();
  }

直接在updated函数里写这个方法,因为这个数据更新了再能挂载

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值