質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

2回答

264閲覧

vue で laravel blade 側の checkValidity イベント状態を知りたい

ttakahashi2013

総合スコア26

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

1クリップ

投稿2018/01/11 06:29

編集2018/01/18 06:52

Vue に関してこういう記事があって、とても参考になって助かっているのですが、
https://qiita.com/sryuji/items/0c4c8e629afbb4b8630a

blade 側で form に id 指定をしないと vue で使えないということがネックです。
vue 側で !form.checkValidity() を使用するのに
blade 側で id 指定以外に呼び出す良い方法はあるでしょうか。

あるいは HTML5 のバリデーション状態により submit ボタンをコントロールする方法はありますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ボタンのclickイベントではなく、素直にフォームのsubmitイベントを受けたほうが楽だと思います。

html

1<template> 2<form @submit.prevent="update"> 3 <input type="text" required /> 4 <button /> 5</form> 6</template> 7 8<script> 9export default { 10 methods: { 11 update(event) { 12 const form = event.target 13 if (!form.checkValidity()) return 14 // 以降、省略 15 // API request && 画面遷移処理 etc.. 16 } 17 } 18} 19</script>

投稿2018/01/11 08:22

naga3

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ttakahashi2013

2018/01/11 11:14

ご回答ありがとうございます。 重ねて質問なのですが、vue側にform が内包されていない状態、 html 側 <form @submit.prevent="update"> <submit-button></submit-button> </form> 単一コンポーネント SubmitButton.vue <template> <div> <button></button> </div> </template> <script> export default { methods: { update(event) { const form = event.target if (!form.checkValidity()) return // 以降、省略 // API request && 画面遷移処理 etc.. } } } </script> となっているのですが、この場合でも良い方法がございますでしょうか。
naga3

2018/01/11 23:42

ボタンのeventのparentElementからfromを取得することはできると思いますが、 コンポーネント内で親DOMにアクセスするのは気持ち悪いので、 ボタンコンポーネントのプロパティ(属性)としてフォーム要素を渡してやるのがスジかな?と思います。
ttakahashi2013

2018/01/18 06:54 編集

ありがとうございます! はい、親DOMにアクセスするのは気持ち悪いが悪くてこのissueを立てました。 ただ質問にあるように、vue ボタンと blade の HTML は分離しています。 可能であれば、正確でなくて良いのでざっとした思い浮かぶコード例などご教授いただけますでしょうか。
ttakahashi2013

2018/01/15 07:42

よろしければですが、どうぞよろしくお願いいたします m(_ _)m
guest

0

自己解決

単一ファイルコンポーネントだけで解決するのは難しかったので、
laravel blade から常に読み込んでいる vue から、単一ファイル windows.event.$emit することでHTML5 のバリデーション結果を取得することで解決しました。

Laravel blade

Laravel

1{!! Form::open('@submit' => 'startSubmit']) !!} 2{!! Form::close() !!}

blade で常に読み込んでいる vue にメソッド追加

Vue.js

1 startSubmit() { 2 window.eventBus.$emit('start-submit'); 3 },

単一ファイルコンポーネント submit-button

Vue.js

1 data() { 2 return { 3 isSubmitting: false, 4 }; 5 }, 6 created() { 7 window.eventBus.$on('start-submit', this.startSubmit); 8 }, 9 methods: { 10 startSubmit() { 11 this.isSubmitting = true; 12 }, 13 },

投稿2018/01/18 06:51

ttakahashi2013

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問