クリックしてテキストを直接編集できるようにする
「クリックしてテキストを直接編集できるようにする」Vue.jsを使うことで、テキストをクリックするとテキストボックスに変換されて、テキスト内容を編集できるようになります。
例えば、管理画面やマイページの一覧が表示されている画面で、内容を直接変更できるようにしたり、カレンダーやスケジュール管理ができるWEBアプリで、登録されている予定をクリックしたらスケジュール内容を直接編集できるようにしたりすることができます。
<html>
<head>
<title>クリックしてテキストを直接編集できるようにする</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div class="item">
<input v-if="editObj==='name'" v-model="name" @keyup.enter="offEdit('name')" @blur="offEdit('name')" v-focus v-cloak name="name" id="name">
<span v-if="editObj!=='name'" @click="onEdit('name')" v-cloak>{{name}}</span>
</div>
<div class="item">
<input v-if="editObj==='mail'" v-model="mail" @keyup.enter="offEdit('mail')" @blur="offEdit('mail')" v-focus v-cloak name="mail" id="mail">
<span v-if="editObj!=='mail'" @click="onEdit('mail')" v-cloak>{{mail}}</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script>
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
new Vue({
el: "#app",
data: {name: "名前",
mail: "aaa@example.com",
editObj: "",
editVal: ""},
methods: {
onEdit: function(OBJ) {
this.editObj = OBJ
this.editVal = this[OBJ]
},
offEdit: function(OBJ) {
this.editObj = ''
elem = document.getElementById(OBJ)
if(elem.value == ""){
this[OBJ] = this.editVal;
}
}
},
})
</script>
</body>
</html>
サンプルでは、「名前」や「aaa@example.com」をクリックすると、テキストボックスに変換されて、内容を編集できます。フォーカスが外れるか、「Enter」を押すと編集は終了されて、元のテキストの状態に戻ります。もし、空の状態で戻った場合には、編集する前の状態が復元されるようになっています。
また、「v-cloak」を入れてスタイルシートで「display:none;」を指定することで、Vue.jsの処理が実行されるまでに、変数名やテキストボックスが表示されてしまうのを防ぐことができます。
実際のプログラムでは、編集が終了してテキストに戻った段階で、DBの内容を編集するようにするか、最終的に「保存する」ボタンをクリックしたらDBの内容を編集するような処理を入れる必要があるかと思います。
関連記事
こちらの記事も読まれています
