ログインボタンをVue.jsの単一ファイルコンポーネントとして作成しようとしています（これはVue.jsフロントエンドを備えたRailsアプリです）。このボタンをクリックすると、外部プロバイダーのログインページに移動するはずです。
画像をボタンとして使用するにはどうすればよいですか？v-on:click実際のリダイレクトに使っていると思いますが、行き詰まっています。
現在、以下のコードは、のようなハードコードされたボタンを示していますimg(src="../assets/img/login_button.png")。あなたはそれをクリックすることができます、しかしそれは明らかに私が望むものではありません。パスではなく、実際のpng画像を表示したいと思います。
// LoginButton.vue
<template lang="pug">
#login-button
<button v-on:click="redirect_to_login">img(src="../assets/img/login_button.png")</button>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class LoginButton extends Vue{
redirect_to_login():void{ // I haven't written this method yet
}
}
</script>
ボタン内で通常のHTML画像を使用できない理由はありますか？私はこれまでパグを使ったことがありません。
<button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button
実際のHTMLフォームではなくVueを使用しているため、ボタンさえ必要ない場合もありますが、代わりにクリックバインディングを画像に追加するだけで済みます。
<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加