【vue.js】シンプルな方法でテーブルに行を追加する手順
こんにちは。今回は、vue.jsについて初心者エンジニアに向けて、シンプルな方法でテーブルに行を追加する手順について解説します。
vue.jsでの基本的なテーブルコンポーネントの作成
まず最初に、vue.jsで基本的なテーブルコンポーネントを作成しましょう。以下のようなコードを table.vue というファイルに保存します。
<template>
<div>
<table>
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ name: "john doe", email: "johndoe@example.com", age: 30 },
{ name: "jane smith", email: "janesmith@example.com", age: 25 },
],
};
},
};
</script>このコードでは、items というデータ配列を用意し、テーブルの各行に対してループ処理を行っています。
テーブルデータの初期化と表示方法の設定
次に、テーブルデータの初期化と表示方法の設定を行います。
<template>
<div>
<table>
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<button @click="addrow">add row</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
mounted() {
this.items = [
{ name: "john doe", email: "johndoe@example.com", age: 30 },
{ name: "jane smith", email: "janesmith@example.com", age: 25 },
];
},
methods: {
addrow() {
this.items.push({ name: "", email: "", age: "" });
},
},
};
</script>このコードでは、mounted ライフサイクルフックを使用して、テーブルの初期データを設定しています。また、addrow メソッドを追加して、新しい行をテーブルに追加する処理を実装しています。
ボタンクリックイベントのリスナー登録と行追加処理の実装
次に、ボタンクリックイベントのリスナー登録と行追加処理の実装を行います。
<template>
<div>
<table>
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<button @click="addrow">add row</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
mounted() {
this.items = [
{ name: "john doe", email: "johndoe@example.com", age: 30 },
{ name: "jane smith", email: "janesmith@example.com", age: 25 },
];
},
methods: {
addrow() {
this.items.push({ name: "", email: "", age: "" });
},
},
};
</script>このコードでは、@click ディレクティブを使用して、ボタンクリック時に addrow メソッドが実行されるように設定しています。addrow メソッドでは、items 配列に新しいオブジェクトを追加することで、テーブルに行を追加しています。
データのバインディングと新しい行の表示方法
データのバインディングと新しい行の表示方法を設定してみましょう。
<template>
<div>
<table>
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td><input v-model="item.name" /></td>
<td><input v-model="item.email" /></td>
<td><input v-model="item.age" /></td>
</tr>
</tbody>
</table>
<button @click="addrow">add row</button>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
};
},
mounted() {
this.items = [
{ name: "john doe", email: "johndoe@example.com", age: 30 },
{ name: "jane smith", email: "janesmith@example.com", age: 25 },
];
},
methods: {
addrow() {
this.items.push({ name: "", email: "", age: "" });
},
},
};
</script>このコードでは、各セルに input 要素を追加し、v-model ディレクティブを使用してデータのバインディングを行っています。これにより、テーブル内のデータを編集できるようになります。
シンプルなテーブル行追加の手順のまとめと応用例
ここまでの手順をまとめると、以下のようなフローとなります。
- テーブルコンポーネントを作成する。
- テーブルデータを初期化し、表示方法を設定する。
- 行追加のためのボタンクリックイベントのリスナーを登録し、行追加処理を実装する。
- データのバインディングを行い、新しい行の表示方法を設定する。
この手順を理解していれば、vue.jsでシンプルな方法でテーブルに行を追加することができます。
参考url
【Vue.js】関連のまとめ
【Vue.js】関連のまとめ
【vue.js】draggableコンポーネントの基本的な使い方と導入方法 【vue.js】ドラッグ可能なリストを作成するためのdraggableの活用方法 【vue.js】ドラッグアンドドロップの操作イベントとハンドリング方法 ...
hack-note.com
2023.09.15
オンラインスクールを講師として活用する！
【完全無料】使えるプログラミングスクール体験セミナー
【完全無料】使えるプログラミングスクール体験セミナー WEB制作の無料教材がここにきてどんどん増えてきてるので、使えるものをまとめようと思います。 TecAcademy（テックアカデミー） TechAcademyの無料体験 Samurai ...
hack-note.com
2021.05.12