0

I am trying to develop an application in vuejs and deploy it using netlify. Note that I am very new to vuejs. I have no warnings or errors in production but when deploying, the website is blank and the following error appears in console :

TypeError: Cannot read properties of undefined (reading 'currentPath')
at index.7d385d0f.js:54:2330
at ls (index.7d385d0f.js:1:23187)
at Proxy.<anonymous> (index.7d385d0f.js:54:2247)
at vn (index.7d385d0f.js:1:15170)
at Jn.b [as fn] (index.7d385d0f.js:1:38048)
at Jn.run (index.7d385d0f.js:1:4525)
at G.c.update (index.7d385d0f.js:1:38314)
at G (index.7d385d0f.js:1:38340)
at rt (index.7d385d0f.js:1:37206)
at ve (index.7d385d0f.js:1:37000)

I only use "currentPath" in one file :

In the <script> tag :

export default {
  data: {
    currentPath: "",
  },
  data() {
    return {
      currentPath: window.location.hash || "",
    };
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || "/"].route || NotFound;
    },
  },
  mounted() {
    window.addEventListener("hashchange", () => {
      this.currentPath = window.location.hash || "";
    });
  },
};

In my html :

<template>
  <notifications />
  <header class="header">
    <a
      v-for="(route, url) in routes"
      :key="route.name"
      class="header-item"
      :class="{ 'header-item-current': this.currentPath === `#${url}` }"
      :href="`#${url}`"
    >
      {{ route.name }}
    </a>
  </header>
  <component class="content" :is="currentView" />
</template>
Lucas
  • 11
  • 2
  • Ok well I fixed the error by changing this.currentPath to this?.currentPath. But I still don't understand why I would only have this error once the application is deployed. – Lucas Jul 21 '22 at 21:31
  • Actually, I fixed the error but then the 'header-item-current' class is not being applied to any element when it should be applied to the element in the header that corresponds to the current page. This works fine in production. – Lucas Jul 21 '22 at 21:38
  • You have `data` as an object and as a function on your default export. Remove the object one. See [data](https://vuejs.org/api/options-state.html#data). You also forgot to mention if you're using Vue2 or Vue3. – tao Jul 22 '22 at 02:02
  • Oh ok, I actually added the object Data in an attempt to solve this problem as I read somewhere that it could be due to the data not being initialized. I am using vue3. – Lucas Jul 23 '22 at 07:23

1 Answers1

1

Okay it would seem it is not necessary (and even causes problems) to use 'this.' inside the html of a vuejs SFC. I have changed

<a
  v-for="(route, url) in routes"
  :key="route.name"
  class="header-item"
  :class="{ 'header-item-current': this.currentPath === `#${url}` }"
  :href="`#${url}`"
>
  {{ route.name }}
</a>

to

<a
  v-for="(route, url) in routes"
  :key="route.name"
  class="header-item"
  :class="{ 'header-item-current': currentPath === `#${url}` }"
  :href="`#${url}`"
>
  {{ route.name }}
</a>

and not only has the error gone away but everything works fine !

Lucas
  • 11
  • 2