vue.jsで汎用Viewを作成してみた #Vue.js

DjangoのGenelic View的なものを、Vue.jsで作成してみました。

1.環境

カテゴリ	バージョンなど
os	windows 10 home 64bit
vue	3.2.1

2.目的

DjangoのGeneric Viewを使うと、formにmodelのカラムをいちいち書かなくても、form.as_pなどとすることでModelのカラムを展開してくれます。

form.html

<form method="POST">
{{ form.as_p }}
</form>

これをvue.jsを使って同じようなことをしてみたいと思います。

3.実装

(1)ファイル構成

dist
│  vue.min.js
sample
│  sample.html
│  vue-genericview.css
│  vue-genericview.js

(2)html

sample/index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="vue-genericview.css">
<style>
    body{
      font-size: 14px;
    }
    .container {
      min-width:20%;
      width: 98%;
      padding: 6px;
    }
</style>
</head>
<body>  
  <div class="container">
      <div id="content">
        <edit-grid 
          :data="griddata"
          >
        </edit-grid>
      </div>
  </div>
<script type="text/javascript" src="../dist/vue.min.js"></script>
<script type="text/javascript" src="./vue-genericview.js"></script>
<script>
  //mydataは実践ではaxiosなどでサーバからjsonを取得します。
  var mydata = {};
  for (var i = 0; i < 5; i++) {
    mydata["label" + i] = "value" + i
  }

  new Vue({
    el: '#content',
    data: {
        griddata : mydata
    },
  })
</script>
</body>
</html>

(3)js

コンポーネントです。props,dataだけを使います。
bootstrapなどを使う場合は、classを適時変更ください。

sample/vue-genericview.js

  Vue.component('edit-grid', {
    template: `
  <div>
    <div class="block core-block" v-for="(value, key) in data">
      <label>{{ key }}</lavel><br/> <input type="text" v-model="value" />
    </div>
  </div>
    `,
    props: {
      data: Array,
    },
    data: function () {
        var data = this.data
        return data
    },
    computed: {
    },
    filters: {
    },
    methods: {
    }
  })

(4)css

一例です。適時編集ください。

sample/vue-genericview.css

    .block {
      padding: 3px;
      display:inline-block;
    }

    .core-block {
      min-width:98%;
    }

    .full-block {
      min-width:98%;
    }

    .block * {
      width: 99%;

    }

    .block input {
      border: none;
      border: 1px solid darkgray !important;
      padding: 3px;
    }

4動作確認

まだ荒っぽいですが、とりあえず目的は達成できました。