SessionStorage won't assign variable inside click event

Question

I'm trying to assign a variable to sessionStorage like so:

<router-link :to="{name: 'admin'}" @click="sessionStorage.auth = false">

but it throws this warning:

[Vue warn]: Unhandled error during execution of native event handler 
  at <RouterLink to= {name: 'admin'} onClick=fn > 
  at <HeaderCms key=1 > 
  at <Cms>
warn @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25050
logError @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25224
handleError @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25216
callWithErrorHandling @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25170
callWithAsyncErrorHandling @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25176
callWithAsyncErrorHandling @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25186
invoker @ app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:33228
app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:38657 

followed by this error:

Uncaught TypeError: Cannot set properties of undefined (setting 'auth')
        at onClick._cache.<computed>._cache.<computed> (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:38657:39)
        at app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:33242:60
        at callWithErrorHandling (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25167:22)
        at callWithAsyncErrorHandling (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25176:21)
        at callWithAsyncErrorHandling (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:25186:21)
        at HTMLAnchorElement.invoker (app.js?id=9ab923fd0732ebefc30fc66fb84cbb22:33228:90)

How can the property be undefined when I am assigning false? What am I doing wrong?

Answer 1

As you can find in the comments of this question "@click.native" is deprecated in Vue.js 3. So I suggest using a button instead of router-link and navigate programmatically like the code below:

<script>
import { RouterLink, RouterView, useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter()
    function navigate() {
      console.log("navigate");
      sessionStorage.setItem("auth", false);
      router.push("/admin");
    }

    return {
      navigate,
      RouterLink,
      RouterView
    }
  }
}
</script>

<template>
 
      <nav>
<!--        <RouterLink to="/admin">-->
          <button @click="navigate">Admin</button>
<!--        </RouterLink>-->
      </nav>

  <RouterView />
</template>

Notice that I used useRouter because this is not accessible in composition API. You can then style the button similar to the other links in your app.

From the comments of this answer I found that we can do that in two other ways also:

using <a> tag for better accessibility:

<script>
import { RouterLink, RouterView, useRouter } from 'vue-router';
import {ref} from "vue";
export default {
  setup() {
    const router = useRouter()
    const trueFalse = ref(false)
    function navigate() {
      console.log("navigate");
      sessionStorage.setItem("auth", trueFalse.value);
      router.push("/admin");
    }

    return {
      navigate,
      RouterLink,
      RouterView
    }
  }
}
</script>

<template>

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/videos">videos</RouterLink>
          <a @click="navigate">Admin</a>
      </nav>

  <RouterView />
</template>

And using <router-link>:

<script>
import { RouterLink, RouterView } from 'vue-router';
import {ref} from "vue";
export default {
  setup() {
    const trueFalse = ref(false)
    function navigate() {
      console.log("navigate");
      sessionStorage.setItem("auth", trueFalse.value);
    }

    return {
      navigate,
      RouterLink,
      RouterView
    }
  }
}
</script>

<template>
 
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/videos">videos</RouterLink>
        <RouterLink to="/admin" @click="navigate">
          Admin
        </RouterLink>
      </nav>

  <RouterView />
</template>

Answer 2

I tried every variation of this I could think of and the only solution that worked for me was to use both a native modifier and a method handler:

<template>
  <router-link :to="{ name: 'admin' }" @click.native="onClick" />
</template>

<script>
export default {
  methods: {
    onClick() {
      sessionStorage.setItem('auth', false);
    },
  },
};
</script>

The reason for the native modifier is described here. I'm not entirely sure why the method handler is required, but as you can see in your original error, sessionStorage is undefined in your inline handler.

NOTE the sessionStorage API uses setItem rather than an assignment.