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

想通了，显然我不必使用新的 Vue 对象，因为当您使用单个文件组件时 vueify 会将其包装起来，因此显然该函数位于父组件中，而不是实际组件中。

这是脚本部分，我唯一改变的是：

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