Laravel 如何从Vuejs中安装的钩子访问对象

我想访问挂载钩子中的数据对象，但当我尝试访问数据时，它会在控制台中抛出Unfine

这是我的源代码

export default {

data() {
  return {
    channel: {},
    subscription: {},

  }

},

methods: {

  read() {
    axios.get('/api/get/details').then(({ data }) => {
      this.channel= data;

    })
      .catch((err) => console.error(err));
  },
},



  mounted() {

      this.read();

      console.log(this.channel.data.userid)

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
        });


    }

  }

---

但是当我控制台

this.channel.data.userid

I gat'undefine'

您的代码是异步的，您的意思是

console.log

不会等到

this.read（）

完成。将其更改为以下内容应该可以工作

export default {

data() {
  return {
    channel: {},
    subscription: {},

  }

},

methods: {

  async read() {
    const { data } = await axios.get('/api/get/details')
    this.channel = data;
  },
},



  async mounted() {

      await this.read();

      console.log(this.channel.data.userid)

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
        });


    }

  }

---

阅读有关async和Promise的更多信息

您遇到了同步问题。使函数异步并等待结束

export default {

  data() {
    return {
      channel: {},
      subscription: {},
    }
  },

  methods: {

    async read() {
      await axios.get('/api/get/details').then(({ data }) => {
        this.channel= data;
      })
      .catch((err) => console.error(err));
    },
  },

  async mounted() {

      await this.read();

      console.log(this.channel.data.userid);

      fetch("https://url/v1/launch/1/details")
        .then(response => response.json())
        .then(json => {
          this.subscription = json
      });
  }
}

---

这回答了你的问题吗？