0

I am attempting to read a variable from within the data object of a Vue component.

This is the Vue template I'm using

<template>
    <section>
        <b-field label="Engineer number">
            <b-input type="number"  v-model="engineer"></b-input>
        </b-field>
        <a class="button" @click="send_login">Login</a>
    </section>
</template>

<script>
export default {
    data() {
        return {
            engineer: '',
        }
    },
    methods: {
        send_login: () => {
            console.log(this.engineer)
            }
        }
    }
</script>

this.engineer always print undefined.

If I wasn't using the template files then this works

let login = new Vue({
    el: '#loginApp',
    data: {
        username: '',
        password: '',
        engineer: '',
    },
    methods: {
        login: () => {
            console.log(login.engineer);
        },
    },
});

Any ideas on what I'm doing wrong?

  • Do you have the source for your `b-input` component? – whoacowboy Jul 27 '17 at 12:59
  • @whoacowboy I do, i'm using buefy. that's all defined elsewhere. I can see everything working in within vue debugger. It's just that `@click="send_login"` it runs but I just don't know how to reference the data variables. –  Jul 27 '17 at 13:02
  • @BertEvans That fixed it thanks. I'm new to es6, much appreciated –  Jul 27 '17 at 13:05

0 Answers0