VueJS Global Mixin readonly variable not accessible from method in a component

Question

I was trying to use vuejs as a frontend scaffolding with WP restapi. I needed the api url generated by wordpress accessible to all the vue components. Here is what I did:

Vue.mixin({
  data: function () {
    return {
      get apiURL () {
        return document.querySelector('link[rel="https://api.w.org/"]').href;
      }
    }
  }
});

The problem is that, I can access the variable is accessible from inside the template tag, like this:

<template>
    <div class="container">
        <p>{{ apiURL }}</p>
    </div>
</template>

But I can't access it inside a method from the component:

methods: {
  loadPosts: function () {
    this.status = 'Loading...';
    axios.get( apiURL + 'wp/v2/posts').then((response) => {
      this.status = '';
      this.posts = response.data;
      console.log(response.data);
    }).catch((error) => {
      console.log(error);
    });
  }
}

In this part of the code, it gives me this error:

ReferenceError: apiURL is not defined

What is the right way to do it. I am using VueJS version 2.

tony19 · Accepted Answer · 2022-07-16 00:38:37Z

1

TLDR: Use this.apiURL:

methods: {
  loadPosts: function () {
    axios.get( this.apiURL + 'wp/v2/posts').then((response) => {
      ...
    });
  }
}

Vue.mixin({
  data: function () {
    return {
      get apiURL () {
        return 'https://jsonplaceholder.typicode.com/';
      }
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    loadPosts: function () {
      console.log(`loadPosts: ${this.apiURL}`);
    }
  }
})

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <button @click="loadPosts">loadPosts()</button>
</div>

The global mixin adds a data field (apiURL) to all Vue instances, and you would access that field as any other data field declared locally in the component (i.e., using this.FIELDNAME, so this.apiURL in your case). Otherwise without the this keyword, accessing apiURL refers to some global variable (of window), which isn't necessarily defined.

edited Jul 16, 2022 at 0:38

answered Apr 2, 2018 at 6:02

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS Global Mixin readonly variable not accessible from method in a component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related