Vue.JS: use variable & axios in mounted()?

Question

my goal is to create an overlay filled with data fetched by axios when the overlay is mounted. I tried it like so but am not able to use it with a variable ( .get("/edit/" + id ) but it works with a hardcoded value (.get("/edit/" + "123")):

<script>
Vue.component("qm-overlay", {
  data() {
    return {
      myid : '123',
    };
  },

  props: {
    [..] 
  },

  mounted() {
      axios
        .get("/edit/" + myid )
        .then(response => (this.overlaydata = response.data));
  },


  methods: {
[..] 
  },

  template: `
        <div id="overlay"> [..] /div>
        `
});
</script>

The errors I get in the browser console are:

[Vue warn]: Error in mounted hook: "ReferenceError: myid is not defined"
ReferenceError: "myid not defined"

Question: Isn't 'myid' defined properly in "data"? What am I doing wrong?

My setting is: Laravel 5.6 and Vue.js with axios. The used URL in axios is created in laravel and working. In the blade file of laravel I call the component with

<qm-overlay></qm-overlay>

Sagar Jajoriya Sagar Jajoriya · Accepted Answer · 2019-10-14T11:34:14

3

votes

Use this.myid instead of myid to access.

Vue.JS: use variable & axios in mounted()?

1 Answers