相信大家都知道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函数里写这个方法,因为这个数据更新了再能挂载

Logo

前往低代码交流专区

更多推荐