如何在 vue.js 中的 href 处调用函数？

Question

当我运行这个源代码时，它只显示给我

[Kakao 未定义] https://i.stack.imgur.com/UA7VI.png

我的来源是这样的

在『nuxt.config.js』中

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    script: [
      { src: 'https://developers.kakao.com/sdk/js/kakao.js'},
    ]
  },
}

在『./pages/login.vue』

<template>
   <a :href="loginWithKakao()">
     <img
       src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
       width="222"
     />
   </a>          
</template>
<script>

export default {
  data() {
    return {
      visible: true,
      account: '',
      password: '',
    }
  },
  computed: {
    ...mapState('store', { logo: (state) => state.logo }),
  },
  methods: {
    loginWithKakao() {
      Kakao.Auth.login({
        success: function (response) {
          // console.log("Kakao.Auth.login - success response ->", response);
          Kakao.API.request({
            url: '/v2/user/me',
            success: function (response) {
              console.log(response)
            },
            fail: function (error) {
              console.log(error)
            },
          })
        },
        fail: function (error) {
          console.log(error)
        },
      })
    },       
  },
  mounted(){
    // Initialize the SDK. Please set the JavaScript key for the app you want to use.
    Kakao.init('JavaScript key');

    // Determines whether to initialize the SDK.
    console.log('Kakao.isInitialized() >>', Kakao.isInitialized());
  },
}
</script>

当我在 html 中使用它时，它起作用了

<a id="custom-login-btn" href="javascript:loginWithKakao()">
  <img
    src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="222"
  />
</a>

据我所知，我们可以将 html 中的 href="javascript:your_function()" 用作 Vue.js 中的 :href="your_function()"

或者有其他方法吗？

Answer 1

为什么不使用 Button 而不是 <a> 标签，因为它显然不是链接？ 但是，无论哪种方式，您都应该只添加一个点击处理程序来调用该函数：

<a @click="loginWithKakao()">
  <img
  
  src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="222"
  />
</a>