Question

如何在函数内部调用函数？

模板： （HTML）

<a v-on:click="hello.world"></a>

JS： （作为组件）

methods: {
    hello: function() {
        return {
            world: function() {
                alert('hello world');
            }
        };
    }
}

我收到了警告：

[Vue警告]：事件“click”的处理程序无效：未定义

可以通过JS 调用this.hello().world()，但不能在模板中调用 （html），例如v-on

我缺少什么？

Answer 1

我不认为这是一个vue问题。

this.hello().world()无效，因为现在无法访问world()。尝试在()函数中添加双括号hello：

methods: {
  hello: function() {
    return {
        world: function() {
            alert('hello world');
        }
    }();
  }
}

现在您可以像这样访问内部函数：this.hello.world();

Answer 2

应该以不同的方式使用它来使其正常工作

<a v-on:click="hello().world()">foo</a>

http://jsbin.com/lizerazire/edit?html,js,output

Answer 3

只需将world定义为方法内部，全局或vue组件中的函数，并以常规方式调用它。

<a @click="hello">foo</a>

function world() {
  alert("hello world");
}

<vue component> {
  methods: {
    hello: function() {
        world();
    }
  }
}

或者

<vue component> {
  methods: {
    hello: function() {
        this.world();
    },
    world: function() {
        alert("Hello world");
    }
  }
}

通过v-on调用函数内部函数：单击

3 个答案: