動き自体はかなりシンプルです。
noteと動きは違いますがボタンを押下したら書き込めるテキストボックスを追加していきます。
イメージはこんな感じです。
左側の＋で行の追加、ーでその行を削除します。
さっそくコードを確認しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="sample_app">
<div class="container">
<template>
<div v-for="(text, index) in textList" class="form">
<div class="form-component">
<div class="form-inline">
<button type="button" class="btn btn-white rounded-circle p-0" v-on:click="addForm(index)" style="width:2rem;height:2rem;">＋</button>
<input class="form-control col" id="textarea" class="form-control" v-model="text.text">
<template v-if="textList.length > 1">
<button type="button" class="btn btn-white rounded-circle p-0" v-on:click="deleteForm(index)" style="width:2rem;height:2rem;">-</button>
</template>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script>
var vm = new Vue({
el: '#sample_app',
delimiters: ['[[', ']]'], // Flaskのdelimiterとの重複を回避
data: {
textList: [],
},
created() {
this.textList = [];
this.addForm();
},
methods: {
addForm(i) {
const addTextForm = {
text: "",
}
this.textList.splice(i+1, 0, addTextForm);
},
deleteForm(i) {
this.textList.splice(i, 1);
}
},
});
</script>
</body>
</html>
結構短い行でできます。
簡単に説明すると、
ポイントは下記のindexです。
<div v-for="(text, index) in textList" class="form">v-on:click="addForm(index)"buttonが押下されると、indexを引数にしてtextListへ指定の場所(index)にspliceします。
ーボタンのdeleteForm(i)も同じ流れとなります。
応用すると色々かっこいいサイトができそうです。
