Question

我正在尝试学习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

然后，该按钮不执行任何操作，它不会显示任何错误或任何错误。

Answer 1

想出来，显然我不必使用新的Vue对象，因为vueify在你使用单个文件组件时将其包装起来，所以显然该函数存在于父组件而不是实际组件中。

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

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

v-on：点击期望一个函数值，未定义

1 个答案: