Question

我将vue.js与axios一起使用，并且当我单击某个按钮时，我试图进行ajax调用。我的问题是我按钮的onclick事件找不到它的功能。有人可以向我解释为什么我的模板无法与我的脚本交互？

这是我要实现的目标的简短示例。

Example.vue

<template>
    <button onclick="someClickFunction();"></button>
</template>

<script>
    function someClickFunction(){
        console.log("You've pressed the button");
    }

    export default {
        name: "button-view",
    }
</script>

<style scoped>
</style>

Answer 1

实际上，您必须在methods对象中编写函数，然后onclick == @click

<template>
        <button @click="someClickFunction();"></button>
    </template>

    <script>
        export default {
            name: "button-view",
            methods: {
              someClickFunction(){
                console.log("You've pressed the button");
              }
            }
        }
    </script>

    <style scoped>
    </style>

Answer 2

那是因为在vue中，您没有使用本机的onclick事件。

相反，您使用

v-on:click

或

@click

最好检查一下文档。它写得非常透彻 https://vuejs.org/v2/guide/events.html

编辑：您的脚本也有错误。所有函数必须在vue实例的方法内部声明

为什么Vue.js模板无法与脚本交互？

2 个答案: