vue-cliでフォームを自動的に送信するにはどうすればよいですか?

amljs

ページが読み込まれたときに非表示のフォームを送信したい。フォームが非表示になっているため、送信ボタンを使用できません。では、ページがvuejsに読み込まれたときに、フォームを自動的に送信するにはどうすればよいですか?

<template>
  <div v-html="this.paymentResponse"></div>
</template>

<script>
import EventBus from '../../event-bus'

export default {
    data() {
        return {
            paymentResponse: null
        }
    },
    mounted() {
        console.log('mounted')
        this.$refs.submitBtn.click();
    },  
    beforeCreate() {
        EventBus.$on("payment", response => {
            this.paymentResponse = response
        })
    }
}
</script>
マジェド・バダウィ

mounted次のように送信ボタンをトリガーできます。

new Vue({
     el: '#sg1',
     mounted(){
          this.$refs.submitBtn.click();
     },
     methods:{
          formSumitted(){
               console.log("submitted");
          }
     }
})
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="sg1">
    <form style="display:none" v-on:submit.prevent="formSumitted">
         <button type="submit" ref="submitBtn">Submit</button>
    </form>
</div>

更新:

フォームはを使用して渡されてレンダリングされるため、v-htmlを使用できないと思いますrefしたがって、これをに置き換え、idvanilllaJavascript関数を使用してボタンをクリックできます。

document.getElementById("submitBtn").click();

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

vue.js 2を使用してフォームを送信するにはどうすればよいですか?

分類Dev

vueコンポーネントでフォームを送信するときに値を取得するにはどうすればよいですか?

分類Dev

Vue-フォームで送信するボタンの値を渡すにはどうすればよいですか?

分類Dev

Vue.js-Enterキーを使用してフォームを送信するにはどうすればよいですか?

分類Dev

Vueで動的エディターフォームコンポーネントを作成するにはどうすればよいですか?

分類Dev

vue cli 2を削除するにはどうすればよいですか?

分類Dev

vue-cli 3.xのウォッチモードですべてのWebpackの自動ビルド後に独自のスクリプトを実行するにはどうすればよいですか?

分類Dev

認証ユーザー laravel を vue props に送信するにはどうすればよいですか?

分類Dev

ubuntu に vue/cli をインストールするにはどうすればよいですか?

分類Dev

Vue-cliでルールを変更するにはどうすればよいですか?

分類Dev

Vue / CliでベースURLを変更するにはどうすればよいですか

分類Dev

Vue cliで、カスタムモードを使用し、本番モードのようにビルドするにはどうすればよいですか?

分類Dev

Vueルーターを起動する前に取得するにはどうすればよいですか?

分類Dev

Vue.jsディレクティブをWTFormsフラスコフォームに挿入するにはどうすればよいですか?

分類Dev

Vue.jsを使用してフォームフィールドの値を合計するにはどうすればよいですか?

分類Dev

Vue CLIで、node-sass(sass-loaderのデフォルト)の代わりにsassを使用するにはどうすればよいですか?

分類Dev

vue-chartjsでチャートを動的に更新するにはどうすればよいですか?

分類Dev

vue cliをインストールするにはどうすればよいですか?

分類Dev

vueコンポーネントでフォームを送信するときに値ラジオボタンを取得するにはどうすればよいですか?

分類Dev

Vue-cliで、ビルドを実行するときに、ビルド後にcssフォルダーとjsフォルダーにファイルを整理するにはどうすればよいですか?

分類Dev

vueコンポーネントのvuexストアを介してデータを自動的に変更するにはどうすればよいですか?

分類Dev

VUEのメインフォルダを変更するにはどうすればよいですか

分類Dev

vue DevToolsにvuexミューテーションを自動的にコミットさせるにはどうすればよいですか?

分類Dev

動的なVueナビゲーションバーを作成するにはどうすればよいですか?

分類Dev

Vue.jsで変更するコンテンツを自動的に更新するにはどうすればよいですか?

分類Dev

Vue CLI 3でstylus-resources-loaderを使用するにはどうすればよいですか?

分類Dev

vue-cli 3でCSSの背景を設定するにはどうすればよいですか?

分類Dev

Vue CLIで静的JSを使用するにはどうすればよいですか?

分類Dev

JavaScriptなしでページを生成するようにVue-CLI3を構成するにはどうすればよいですか?

Related 関連記事

  1. 1

    vue.js 2を使用してフォームを送信するにはどうすればよいですか?

  2. 2

    vueコンポーネントでフォームを送信するときに値を取得するにはどうすればよいですか?

  3. 3

    Vue-フォームで送信するボタンの値を渡すにはどうすればよいですか?

  4. 4

    Vue.js-Enterキーを使用してフォームを送信するにはどうすればよいですか?

  5. 5

    Vueで動的エディターフォームコンポーネントを作成するにはどうすればよいですか?

  6. 6

    vue cli 2を削除するにはどうすればよいですか?

  7. 7

    vue-cli 3.xのウォッチモードですべてのWebpackの自動ビルド後に独自のスクリプトを実行するにはどうすればよいですか?

  8. 8

    認証ユーザー laravel を vue props に送信するにはどうすればよいですか?

  9. 9

    ubuntu に vue/cli をインストールするにはどうすればよいですか?

  10. 10

    Vue-cliでルールを変更するにはどうすればよいですか?

  11. 11

    Vue / CliでベースURLを変更するにはどうすればよいですか

  12. 12

    Vue cliで、カスタムモードを使用し、本番モードのようにビルドするにはどうすればよいですか?

  13. 13

    Vueルーターを起動する前に取得するにはどうすればよいですか?

  14. 14

    Vue.jsディレクティブをWTFormsフラスコフォームに挿入するにはどうすればよいですか?

  15. 15

    Vue.jsを使用してフォームフィールドの値を合計するにはどうすればよいですか?

  16. 16

    Vue CLIで、node-sass(sass-loaderのデフォルト)の代わりにsassを使用するにはどうすればよいですか?

  17. 17

    vue-chartjsでチャートを動的に更新するにはどうすればよいですか?

  18. 18

    vue cliをインストールするにはどうすればよいですか?

  19. 19

    vueコンポーネントでフォームを送信するときに値ラジオボタンを取得するにはどうすればよいですか?

  20. 20

    Vue-cliで、ビルドを実行するときに、ビルド後にcssフォルダーとjsフォルダーにファイルを整理するにはどうすればよいですか?

  21. 21

    vueコンポーネントのvuexストアを介してデータを自動的に変更するにはどうすればよいですか?

  22. 22

    VUEのメインフォルダを変更するにはどうすればよいですか

  23. 23

    vue DevToolsにvuexミューテーションを自動的にコミットさせるにはどうすればよいですか?

  24. 24

    動的なVueナビゲーションバーを作成するにはどうすればよいですか?

  25. 25

    Vue.jsで変更するコンテンツを自動的に更新するにはどうすればよいですか?

  26. 26

    Vue CLI 3でstylus-resources-loaderを使用するにはどうすればよいですか?

  27. 27

    vue-cli 3でCSSの背景を設定するにはどうすればよいですか?

  28. 28

    Vue CLIで静的JSを使用するにはどうすればよいですか?

  29. 29

    JavaScriptなしでページを生成するようにVue-CLI3を構成するにはどうすればよいですか?

ホットタグ

アーカイブ