CODEWITHSUNDEEP
javascriptvue.jsvue-routervue-component
ZSnake
ZSnake

Reputation: 158

v-on:click expects a function value, got undefined

I'm trying to learn vuejs, currently trying to react to a button press, but the v-on:click directive doesn't find (apparently) the method I added to the component.

Here's my component: 

<template>
    <!-- super big form ... -->      
            <div class="card-content">     
            <div class="card-action">
                <a class="waves-effect waves-light btn blue darken-4" v-on:click="createOrganization">Guardar</a>
                <a class="waves-effect waves-light btn red darken-4">Limpiar</a>
            </div>
        </div>
    </div>
</template>

<script>
    var Vue = require('vue');

    module.exports.addOrganization = new Vue({
        name: 'addOrganization',
        methods: {
            createOrganization: function(event){
                event.preventDefault();
                alert("0");
            }
        }
    });
</script>

This is the parent component

<template>  
    <div id="navbar">
        <navbar></navbar>
    </div>
        <router-view></router-view>
</template>

<script>
    var nav = require('./src/components/navbar.vue');
    module.exports = {
        data () {
            return {
                var: "hi",
            }
        },
        components: {
            'navbar': nav
        }
    }
</script>

And here's the main file

var VueRouter = require('vue-router');
var addOrg = require('./src/components/addOrganization.vue');
var Vue = require('vue'); 
var App = require('./App.vue');
var VueResource = require('vue-resource');

$(document).ready(function() {
    $('select').material_select();

    var d = new Date();
    d.setFullYear( d.getFullYear() - 100 );
    $('.datepicker').pickadate(
    {
        selectMonths: true,
        selectYears: d,
        max: new Date()
    })
});

Vue.use(VueResource);
Vue.use(VueRouter);

new Vue({
  el: 'body',
  components: {
    app: App
  },
})

var router = new VueRouter();

router.map({
    '/': {
        name: 'addOrganization',
        component: addOrg
    }
})  

router.start(App, '#brightcrest');

And the warning I'm getting 

vue.common.js:1019[Vue warn]: v-on:click="createOrganization" expects a function value, got undefined

Then, the button doesn't do anything, it doesn't show any errors or anything.

Upvotes: 1

Views: 3354

Answers (1)

ZSnake
ZSnake

Reputation: 158

Figured it out, apparently I didn't have to use a new Vue object because vueify wraps it up when you're using single file components, so apparently the function was living in the parent component and not in the actual component.

Here's the script part, the only thing I changed: 

<script>
    module.exports = {
        name: 'addOrganization',
        methods: {
            createOrganization: function(event){
                event.preventDefault();
                alert("0");
            }
        }
    };
</script>

Upvotes: 1

Related Questions