JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介

Vue.js

クリックしてテキストを直接編集できるようにする

「クリックしてテキストを直接編集できるようにする」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>

{{name}}
{{mail}}

サンプルでは、「名前」や「aaa@example.com」をクリックすると、テキストボックスに変換されて、内容を編集できます。フォーカスが外れるか、「Enter」を押すと編集は終了されて、元のテキストの状態に戻ります。もし、空の状態で戻った場合には、編集する前の状態が復元されるようになっています。

また、「v-cloak」を入れてスタイルシートで「display:none;」を指定することで、Vue.jsの処理が実行されるまでに、変数名やテキストボックスが表示されてしまうのを防ぐことができます。

実際のプログラムでは、編集が終了してテキストに戻った段階で、DBの内容を編集するようにするか、最終的に「保存する」ボタンをクリックしたらDBの内容を編集するような処理を入れる必要があるかと思います。


関連記事

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

このサイトについて

JavaScript・PHP・Vue.jsのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com