v-on：clickが関数の値を期待しています。未定義です

Question

vuejを習得しようとしていますが、現在はボタンプレスに反応しようとしていますが、v-on：clickディレクティブは（明らかに）コンポーネントに追加されます。

ここに私のコンポーネントです：

<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> 

これは、親コンポーネント

<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> 

されており、ここでの主なファイルは

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'); 

そして、私は

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

を取得しています警告です

ボタンは何もしません。エラーは表示されません。

Answer 1

ひとつのファイルコンポーネントを使用しているときにvueifyがそれをラップするので、明らかに私は新しいVueオブジェクトを使う必要はなかったようですが、その関数は実際のコンポーネントではなく親コンポーネントに存在していたようです。

はここでスクリプト部分、私は変更だけのことだ：

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