Vue how to solve Uncaught SyntaxError: Function statements require a function name

Question

I'm trying to create a simple web app with authentication via Telegram. Telegram has it's own widget with callback which returns you user data after logging in. And the problem is in the script attribute "data-onauth" here you pass the callback you want to execute after success auth.

( https://core.telegram.org/widgets/login - widget documentation if you need it )

To locate log in button in the place you want you just need to paste script given by Telegram's widget generator, but since I can't paste script tag in components template ( vue just won't compile it & just return you error ) I chose to create script element add needed attributes and append it in mounted().

Here is my component code

<template>
  <header>
      <div class="auth" id="telegramAuth">
      </div>
  </header>
</template>

<script>
export default {
  name: "Header",
  data: () => ({}),
  mounted() {
    let telegramAuth = document.createElement("script");
    telegramAuth.setAttribute("async", "");
    telegramAuth.setAttribute(
      "src",
      "https://telegram.org/js/telegram-widget.js?7"
    );

    telegramAuth.setAttribute("data-userpic", "false");
    telegramAuth.setAttribute("data-telegram-login", "t_adv_bot");
    telegramAuth.setAttribute("data-size", "large");
    telegramAuth.setAttribute("data-onauth", this.loginWithTelegram);
    telegramAuth.setAttribute("data-request-access", "write");
    document.querySelector("#telegramAuth").appendChild(telegramAuth);
  },
  methods: {
    loginWithTelegram: function onTelegramAuth(user) {
        console.log(user);
    }
  }
};
</script>

But when I try to do so I get Uncaught SyntaxError: Function statements require a function name. And I don't know how to solve it. Thanks in advance and sorry for my poor English

Answer 1

  methods: {
    loginWithTelegram(user) {
     console.log(user);
    }
  }