Vue.jsのフォーム入力バインディング

Vue.jsを触ってみて2日目(laravel)

フォーム変更時の値の取り方が分からずやっと分かったのでメモ

<template>
    <div>
        <p>{{ maguro }}</p>
        <input class="input" v-model="maguro" v-on:input="updateValue($event.target.value)">
    </div>
</template>

<script>
    export default {
        name: 'maguro',
        data () {
            return {
                maguro: ''
            }
        },
        methods: {
            updateValue: function (value) {
                console.log(value);
            }
        }
    }
</script>