クリックしてテキストを直接編集できるようにする
「クリックしてテキストを直接編集できるようにする」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）...（8k view）
「ヒラギノ角ゴ」にソックリ！無料で使えるOpen Type フォント「...（3.7k view）
Windows10で複合機のスキャンができなくなった時の対処法...（2.5k view）
【詐欺メールに注意】お客様のAmazonプライム会員資格は、2019/...（2.4k view）
プリンターの状態が「要確認」と表示されて印刷できない場合の復旧方法...（1.6k view）
Windowsで「更新してシャットダウン」が消えない場合の対処法...（1.2k view）
Android スマホで明朝体を表示させたい場合の対処法...（857 view）
iPhone等のスマホで<video>タグの動画が表示され...（691 view）
「東京電力からのご案内」のSMSは詐欺メールではなかった！...（609 view）
DELL Windows10搭載 PCのリカバリディスク（メディア）を...（589 view）
