Vue.js:简单的点击功能不触发 [英] Vue.js: Simple click function not firing

问题描述

我有一个非常简单的应用程序:

<page-change page="bio" @click="changeThePage"></page-change><page-change page="health" @click="changeThePage"></page-change><page-change page="finance" @click="changeThePage"></page-change><page-change page="images" @click="changeThePage"></page-change>
Vue.component("页面变化", {模板:<button class='btn btn-success'>Button</button>",道具:[页面"]})var 客户 = 新的 Vue({el: '#show_vue',数据: {当前路由:window.location.href},方法: {更改页面:函数(){console.log("这是有效的")}}})

...但是当我点击 <page-change></page-change> 按钮时，控制台没有记录任何内容.我知道我遗漏了一些简单的东西，但我没有收到任何错误.

如何让我的点击触发 changeThePage

解决方案

当你这样做时:

<page-change page="bio" @click="changeThePage"></page-change>

这意味着您正在等待 page-change 组件发出 click 事件.

最佳解决方案(感谢@aeharding):使用 .native 事件修饰符

<page-change page="bio" @click.native="changeThePage"></page-change>

解决方案1:从子组件发出点击事件:

Vue.component("页面变化", {模板: "Button",道具:[页面"]，方法: {点击:功能(事件){this.$emit('click', this.page, event);}}})

有关信息 event 是 Vue 为原生事件(如 click)传递的默认值:DOM 事件

解决方案 2:直接从父组件发射:

Vue.component("page-change", {模板:<button class='btn btn-success'>Button {{ page }}</button>",道具:[页面"]})var 客户 = 新的 Vue({el: '#show_vue',数据: {当前路由:window.location.href，页数:['生物'，'健康'，金融"，图像"]},方法: {changeThePage:函数(页面，索引){console.log("这是有效的.页面:"，页面，'.索引:'，索引)}}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script><div id="show_vue"><span v-for="(page, index) in pages" :key="index+page"@click="changeThePage(page, index)"><page-change :page="page"></page-change></span>

I have a very simple app:

<div id="show_vue">
    <page-change page="bio" @click="changeThePage"></page-change>
    <page-change page="health" @click="changeThePage"></page-change>
    <page-change page="finance" @click="changeThePage"></page-change>
    <page-change page="images" @click="changeThePage"></page-change>
</div>

Vue.component("page-change", {
    template: "<button class='btn btn-success'>Button</button>",
    props: ["page"]
})

var clients = new Vue({
    el: '#show_vue',
    data: {
        currentRoute: window.location.href
    },
    methods: {
        changeThePage: function() {
            console.log("this is working")
        }
    }
})

...but when I click the <page-change></page-change> button, nothing is logged to the console. I know I'm missing something simple but I'm not getting any errors.

How do I make my click fire changeThePage

解决方案

When you do :

<page-change page="bio" @click="changeThePage"></page-change>

That means that your are waiting page-change component emit the click event.

Best solution (thanks to @aeharding) : Use .native event modifier

<page-change page="bio" @click.native="changeThePage"></page-change>

Solution 1 : emit click event from child component :

Vue.component("page-change", {
    template: "<button @click='clicked' class='btn btn-success'>Button</button>",
    props: ["page"],
    methods: {
       clicked: function(event) {
         this.$emit('click', this.page, event); 
       }
    }
})

For information event is the default value passed by Vue for native event like click : DOM event

Solution 2 : emit directly from parent component :

Vue.component("page-change", {
    template: "<button class='btn btn-success'>Button {{ page }}</button>",
    props: ["page"]
})

var clients = new Vue({
    el: '#show_vue',
    data: {
        currentRoute: window.location.href,
        pages: [
          'bio', 'health',
          'finance', 'images'
        ]
    },
    methods: {
        changeThePage: function(page, index) {
            console.log("this is working. Page:", page, '. Index:', index)
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>
<div id="show_vue">

  <span v-for="(page, index) in pages" :key="index+page"
        @click="changeThePage(page, index)">
  
    <page-change :page="page"></page-change>
    
  </span>

</div>

这篇关于Vue.js:简单的点击功能不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！