前提・実現したいこと
テーブルの行を form、 セルを input にしてフォームを作成したいです。
テーブルは vue-good-table を用いて作成しています。
その際に VeeValidate を用いて個別の input タグの監視、form 全体の監視がしたいです。
個別の input タグの監視はできているのですが、全体の監視ができずに悩んでいます。
該当のソースコード
JavaScript
1<div class="table-main"> 2 <vue-good-table id="table" :columns="columns":rows="rows"> 3 <template slot="table-row" slot-scope="props"> 4 <validation-observer v-slot="{ invalid }"> 5 <form @submit.prevent="confirmData(props)"> 6 <div v-if="props.column.field == 'action'" class="icon-wrapper"> 7 <font-awesome-icon 8 @click="confirmData(props)" 9 type="submit" 10 :disabled="invalid" 11 icon="check" 12 class="font-awesome i-check" 13 /> 14 <font-awesome-icon 15 @click="deleteAddData(props)" 16 icon="trash" 17 class="font-awesome i-delete" 18 /> 19 </div> 20 <ValidationProvider 21 v-else 22 rules="required|integer" 23 v-slot="{ errors }" 24 > 25 <div class="input-wrapper"> 26 <input 27 type="number" 28 class="input-data" 29 v-model.number="props.row[props.column.label]" 30 /> 31 <span class="error-message">{{ errors[0] }}</span> 32 </div> 33 </ValidationProvider> 34 </form> 35 </validation-observer> 36 </div>..
上記のコードで下図の様に個別の監視は実現できました。
![]
しかし、チェックボタン(submit)を押すと通ってしまいます。その原因として、validation-observerでValidationProviderを囲めていないことにあります。
理想としては
<tr> <form> <div class='input-wrapper'> <input type='number'> </div> <div class='input-wrapper'> ... </div> </form> </tr>
ですが、vue-good-table では実現できなさそうです。ですので、VeeValidate のみで実現したいのです。
もし同じ様なケースで解決した方や、アイデアがある方がいらっしゃいましたら回答いただけると幸いです。
あなたの回答
tips
プレビュー