vue で laravel blade 側の checkValidity イベント状態を知りたい
- 評価
- クリップ 1
- VIEW 117
Vue に関してこういう記事があって、とても参考になって助かっているのですが、
https://qiita.com/sryuji/items/0c4c8e629afbb4b8630a
blade 側で form に id 指定をしないと vue で使えないということがネックです。
vue 側で !form.checkValidity() を使用するのに
blade 側で id 指定以外に呼び出す良い方法はあるでしょうか。
あるいは HTML5 のバリデーション状態により submit ボタンをコントロールする方法はありますでしょうか。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
ボタンのclickイベントではなく、素直にフォームのsubmitイベントを受けたほうが楽だと思います。
<template>
<form @submit.prevent="update">
<input type="text" required />
<button />
</form>
</template>
<script>
export default {
methods: {
update(event) {
const form = event.target
if (!form.checkValidity()) return
// 以降、省略
// API request && 画面遷移処理 etc..
}
}
}
</script>投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
0
単一ファイルコンポーネントだけで解決するのは難しかったので、
laravel blade から常に読み込んでいる vue から、単一ファイル windows.event.$emit することでHTML5 のバリデーション結果を取得することで解決しました。
Laravel blade
{!! Form::open('@submit' => 'startSubmit']) !!}
{!! Form::close() !!}blade で常に読み込んでいる vue にメソッド追加
startSubmit() {
window.eventBus.$emit('start-submit');
},単一ファイルコンポーネント submit-button
data() {
return {
isSubmitting: false,
};
},
created() {
window.eventBus.$on('start-submit', this.startSubmit);
},
methods: {
startSubmit() {
this.isSubmitting = true;
},
},投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 91.06%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2018/01/11 20: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>
となっているのですが、この場合でも良い方法がございますでしょうか。
2018/01/12 08:42
コンポーネント内で親DOMにアクセスするのは気持ち悪いので、
ボタンコンポーネントのプロパティ（属性）としてフォーム要素を渡してやるのがスジかな？と思います。
2018/01/18 15:54 編集
はい、親DOMにアクセスするのは気持ち悪いが悪くてこのissueを立てました。
ただ質問にあるように、vue ボタンと blade の HTML は分離しています。
可能であれば、正確でなくて良いのでざっとした思い浮かぶコード例などご教授いただけますでしょうか。
2018/01/15 16:42