javascript - 为什么 Vue.js 模板不能交互它的脚本？

Question

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

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

例子.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>

标签： javascriptvue.js

Answer 1

在 vue 中，你必须在方法对象和 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>