クリックしてテキストを直接編集できるようにする
「クリックしてテキストを直接編集できるようにする」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の内容を編集するような処理を入れる必要があるかと思います。
関連記事
こちらの記事も読まれています
音量アイコンが反応しない場合の対処法（Windows 10）...（8.1k view）
「ヒラギノ角ゴ」にソックリ！無料で使えるOpen Type フォント「...（3.1k view）
【詐欺メールに注意】お客様のAmazonプライム会員資格は、2019/...（3.1k view）
プリンターの状態が「要確認」と表示されて印刷できない場合の復旧方法...（1.7k view）
「【楽天】パスワード初期化のご連絡」は本物？見分け方と対処法...（1.5k view）
Windowsで「更新してシャットダウン」が消えない場合の対処法...（846 view）
Windows10で複合機のスキャンができなくなった時の対処法...（674 view）
Android スマホで明朝体を表示させたい場合の対処法...（660 view）
2016年前後からYahoo!の表示が遅い（重い）場合の対処方法...（619 view）
迷惑メール？「MAILER-DAEMON」から大量にメールが届く場合は...（563 view）
