SessionStorage won't assign variable inside click event-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

You need to use the .native modifier on the @click event of router-link, so try with:

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

CodePudding user response：

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.