Vue.jsで入力フォームの値を取得して処理してみる

Vue.jsで入力フォームの値取得して、独自処理を書く処理でやってみた内容です。

<div id="input-form">
    <div>
        <input type="text" v-model="name" >
        <input type="text" v-model="mei" >
        <input type="text" v-model="start_date">
        <button v-on:click="getSearch">
    </div>

    <div>
        {{ fullName }}
    </div>

</div>

<script>
var inputViewModel = new Vue({
    el: '#input-form',
    data: {
        name: "",
        mei: "",
        start_date: "2017-10-01",
    },
    computed: {
        fullName: function () { return this.name + this.mei },
    },
});

function getSearch(){
   /* データ検索 */
}
</script>

ボタンを押して、関数内でVueのdata要素からinputの値を取得していろいろ処理可能です。

inputViewModel.$dataで取得できたかな。ユーザ定義のプロパティと区別するために、頭に $ が付けられているらしい。

むりやりcomputedを使ってみたけど、このあたりが使いこなせると更に良くなりそうです。

リストのfilterとかcomputed使ってやってみたことありますが、入力した内容をカスタマイズして表示とか簡単にできます。

ほぼ期待どおりの動作ができました。inputとlistとかでパーツわけしても連携とかちゃんとできることもわかりました。

いまわからないのは「computed」と「method」の違いとか、「method」に書くべきか外部関数で作るべきか、悩んでます。