Vue.js: 단순 클릭 기능이 실행되지 않음

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

자세한 내용은 이쪽event다음과 같은 네이티브 이벤트에 대해 Vue가 전달한 기본값입니다.click: DOM 이벤트

솔루션 2: 부모 컴포넌트에서 직접 방출:

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>

이를 위한 최선의 방법은.native이벤트 수식자

예를 들어 다음과 같습니다.

<my-custom-component @click.native="login()">
  Login
</my-custom-component>

출처 : https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

보아하니v-on:click와의 연계성이 뛰어난 것 같습니다..native이벤트 수식자

해라page="bio" v-on:click.native="changeThePage()"></page-change>.그것은 나에게 효과가 있었다.

언급URL : https://stackoverflow.com/questions/43242322/vue-js-simple-click-function-not-firing