vuejs 组件中的 @click 不会以任何方式做出反应答案

【问题标题】：@click in vuejs component will not react in any wayvuejs 组件中的 @click 不会以任何方式做出反应
【发布时间】：2018-08-11 23:17:56
【问题描述】：

<template>
 <div class="container" id="app">
     <button @click="console.log('hello')">
         Hello
     </button>
 </div>
</template>

<script>
 export default {
     name:"test",
 }
</script>

<style scoped>
</style>

这只是 vuejs 组件的示例代码，我只想在每次单击按钮时在控制台上写下“hello”，但这似乎不起作用，我不明白为什么......我曾尝试在更复杂的组件中使用@click，当我意识到它不起作用时，我想制作一个只有这个按钮的新组件，这样我就可以消除其余代码导致这种情况的可能性......我没有收到任何错误或警告...我不知道发生了什么...

【问题讨论】：

标签： javascript vue.js click components

【解决方案1】：

试试这个方法，文档中描述了通过在脚本块中添加一个方法并引用该方法：

<template>
   <div class="container" id="app">
     <button @click="log('hallo')">
         Hello
     </button>
 </div>
</template>


<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        log(text) {
            console.log(text)
        }
    }
}
</script>

将 .prevent 添加到 @click 表示法以防止默认行为（如发布/刷新）是一种很好的做法

@click.prevent="myFunction"

【讨论】：

是的，我一开始就尝试这样做，但它似乎不起作用......它没有给出任何错误，但它也没有做任何事情......
你把它用作SPA吗？（在单个文件中）向我展示您的代码正在加载您的组件的位置。您是否已将其注册为组件等？
是的，我只在我的 test.blade.php 文件中使用它，我已经在我的 app.js 文件中全局注册了它......这就是我的 test.blade.php 文件的样子...... @extends('layouts.app') @section('content') <div class="container"> <test></test> </div> @endsection

【解决方案2】：

您肯定会遇到错误。

它不起作用的原因是您在模板中使用的所有内容基本上都以this 为前缀，因此您的代码试图调用不存在的this.console.log。

我通常有一个名为 log 的全局混合方法，它记录传递给它的任何参数。

Vue.mixin({
  methods: {
    log () {
      if (console && process.env.NODE_ENV !== 'production') {
        console.log(...arguments)
      }
    },
  },
})

【讨论】：