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

Question

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

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

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

Answer 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>

Comments

[ttakahashi2013]

ご回答ありがとうございます。
重ねて質問なのですが、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]

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

[ttakahashi2013]

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

[ttakahashi2013]

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

Answer 2

単一ファイルコンポーネントだけで解決するのは難しかったので、
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;
      },
    },