LINE LIFF BROWSER

<template> <v-app id="inspire"> <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="primary" dark > <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer" />-->

  <v-toolbar-title style="width: 350px">
    <a href="/" class="white--text" style="text-decoration: none"
      ><v-icon>mdi-truck</v-icon></a
    >
  </v-toolbar-title>
  <v-text-field
    flat
    solo-inverted
    hide-details
    prepend-inner-icon="mdi-magnify"
    label="Search"
    class="hidden-sm-and-down pl-10 ml-4"
  />
  <v-spacer />

    <div>
      <v-btn href="/profile" v-if="loggedIn" icon >
        <img
          v-if="loggedIn"
          :src="$store.state.user_data.image"
          class="rounded-circle"
          width="35"
        />
        <v-icon v-else>mdi-account-circle</v-icon>
      </v-btn>
  </div>


  <v-btn icon>
    <v-badge content="2" value="2" color="green" overlap>
      <v-icon>mdi-bell</v-icon>
    </v-badge>
  </v-btn>
  <v-btn href="/cart" icon>
    <v-badge content="2" value="2" color="green" overlap>
      <v-icon>mdi-cart</v-icon>
    </v-badge>
  </v-btn>
  <span class="ml-3">
    <v-btn @click="login" v-if="!loggedIn" icon>Login</v-btn>
    <v-btn v-else @click="logout" icon>Logout</v-btn>
  </span>
</v-app-bar>
<v-content>
  <v-bottom-navigation :value="activeBtn" color="primary" horizontal>
    <a href="/" class="v-btn">
      <span>Home</span>
    </a>
    <v-menu open-on-hover offset-y>
      <template v-slot:activator="{ on }">
        <v-btn v-on="on">
          <span>Shop</span>
        </v-btn>
      </template>
      <v-card class="mx-auto" max-width="344" outlined>
        <v-list-item
          v-for="(item, index) in items"
          :key="index"
          href="/shop"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-card>
    </v-menu>
    <a href="/product" class="v-btn">
      <span>Product</span>
    </a>
    <v-btn href="/blog">
      <span>Blog</span>
    </v-btn>
    <!-- <v-btn href="/profile">
      <span>Profile</span>
    </v-btn> -->
  </v-bottom-navigation>
</v-content>
<v-content v-if="loggedIn"
  ><p class="overline text-center">
    Hello, <b>{{ $store.state.user_data.name }}</b>
  </p></v-content
>
<router-view />
<v-footer :padless="true">
  <v-card flat tile width="100%" class="secondary white--text text-center">
    <v-card-text>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-home</v-icon>
      </v-btn>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-email</v-icon>
      </v-btn>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-calendar</v-icon>
      </v-btn>
      <v-btn class="mx-4 white--text" icon>
        <v-icon size="24px">mdi-delete</v-icon>
      </v-btn>
    </v-card-text>

    <v-card-text class="white--text pt-0">
      Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet.
      Mauris cursus commodo interdum. Praesent ut risus eget metus luctus
      accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim
      a sit amet dui. Duis commodo vitae velit et faucibus. Morbi vehicula
      lacinia malesuada. Nulla placerat augue vel ipsum ultrices, cursus
      iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum
      tempor vel ut orci. Orci varius natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus.
    </v-card-text>

    <v-divider>
      
    </v-divider>

    <v-card-text class="white--text">
      {{ new Date().getFullYear() }} — <strong>WeCode</strong>
    </v-card-text>
  </v-card>
</v-footer>

</v-app> </template> <script> export default { data() { return { isHidden:true, // 1 items: [ { title: "T-Shirts" }, { title: "Jackets" }, { title: "Shirts" }, { title: "Jeans" }, { title: "Shoes" }, ], activeBtn: 1, defaultLiffId: "1528952656-KGNKK2jZw" // loading:false, // a:HTMLElement }; }, created() { this.login(); this.getData();

let uri = window.location.href.split("?");
let getVars = {};
if (uri.length == 2) 
{
    let vars = uri[1].split("&");
    let tmp = "";
    vars.forEach(function (v) {
      tmp = v.split("=");
      if (tmp.length == 2) getVars[tmp[0]] = tmp[1];
    });
    console.log(getVars);
}

if (Object.keys(getVars).indexOf("code") > -1) 
{
    this.getData();
}

}, computed: { loggedIn() { return this.$store.state.loggedIn; }, }, methods: { profile() { console.log("Profile"); this.$router.push("/profile"); }, login() { let self = this; console.log("Login"); liff.init ({ liffId: self.defaultLiffId, withLoginOnExternalBrowser: true }) .then(() => { if (!liff.isLoggedIn()) { liff.login ({ // a:innerHTML=<i class='fa fa-spin fa-spinner'></i>, redirectUri:"", withLoginOnExternalBrowser:true }); } }).catch((err) => { console.log("Initialize app", err); }); }, logout() { let self = this; window.liff.init ({ liffId: self.defaultLiffId, }) .then(() => { if(liff.isLoggedIn()) { liff.logout(); self.$store.commit("logOut"); this.$router.push({ name: "Home" }); localStorage.clear(); } }); }, getData() { let self = this; window.liff.init ({ liffId: self.defaultLiffId, }).then(() => { liff.getProfile().then(function (profile) { self.$store.commit("logIn", profile); }); }); }, }, }; </script>

Can you show me your sample code? I can't resolve probrem