こんにちは。
今業務でvue.jsをやっています。
今まで経験がなかったので試行錯誤しながらやっていますが楽しいですね。
最終的にボツになったけど個人的スッキリしたことがあったのでそれについて書こうと思います。
課題
element plusのテーブルタグを使った状態で配列に格納された複数のオブジェクトに対してバリデーションを適応していくというものです。
軽くelement plusについて説明します。
あってるかわかりませんが、element plusはvue.jsのCSSライブラリというか便利なコンポーネントたちと思っています。
<template>
<el-table :data=”users”>
<el-table-column prop=”name” label=”名前”>
<el-table-column prop=”age” label=”年齢”>
</el-table>
</template>
<script>
export default {
data() {
users: [
{name: “ユーザー１, age: 20},
{name: “ユーザー２, age: 30},
}
}
上の例では単純に名前と年齢を表示した2行のテーブルが作成されます。
これから名前を入力フォームにして入力チェックしようと思います。
対応
ソースはこちら
<el-form :model=”users”>
<el-table :data=”users”>
<el-table-column prop=”name” label=”名前”>
<tempalte #default=”scope”>
<el-form-item :prop=”scope.$index + name” :rules=”[{repuired: true, message=’入力してください’}]”>
<el-input v-model=”scope.row.name”/>
</el-form-item>
</template>
<el-table-column prop=”age” label=”年齢”>
</el-table>
</el-form>
</template>
<script>
export default {
data() {
users: [
{name: “ユーザー１, age: 20},
{name: “ユーザー２, age: 30},
}
}
el-form-itemのprop属性にインデックスとプロパティ名を指定してあげるだけでいけました。
感想
ネットで調べても情報を見つけられなかったので手探りでやってみましたが動いて良かったです。