Vue.js 简单的点击功能不触发

<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")
        }
    }
})

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

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

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); 
       }
    }
})

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相关问答推荐

Nuxt 3中间件在部署到Netliy时基于IP国家代码的重定向不起作用

使用插槽的VUE 3工作台

将Vite Vuejs应用部署到Apache服务器

Select 项目后，Vuetify v-select在select后面显示数字1

如何将模板传递给EJS菜单

Vue Js Composition Api 未定义(读取名称)

将 Vue 应用程序挂载到主 Vue 应用程序的容器中

VueJS：为什么在input事件处理程序中触发Input输入事件？

Vuetify Datatable - 在所有列上启用内容编辑

为什么组件在 v-if 下没有被销毁

如何将 ASP.NET Core 2.1 与 Vue CLI 3 集成？

Polyfill for ie

Vue-Router 抽象父路由

为什么 vue 文档说 refs 不是响应式的，而实际上它们是响应式的

如何在 Vue.js 中获取组件元素的 offsetHeight？

动态注册本地 Vue.js 组件

如何将数据传递给 Vue.js 中的路由视图

在 .vue 文件中使用 Vue.set() 和 Vue.use()

Vuetify 过渡：如何设置过渡速度

将鼠标悬停在 TailwindCSS 中的 div 上时显示按钮