1

現在、ボタンの押下に反応しようとしている vuejs を学習しようとしていますが、 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

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

4

1 に答える 1

1

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

スクリプト部分は次のとおりです。変更したのは次のとおりです。

<script>
    module.exports = {
        name: 'addOrganization',
        methods: {
            createOrganization: function(event){
                event.preventDefault();
                alert("0");
            }
        }
    };
</script>
于 2016-08-21T20:49:28.287 に答える