Vue 2：無法找到組件中的單擊事件的方法

Question

在我的vue應用程序中，我正在調用位於組件中的click事件的函數。下面是該組件的代碼：

Vue.component('new-board', { 
    template: ` 
    <div> 
     <br/> 
     <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      Create New Board 
     </div> 
     <div class="panel-body"> 
      <input class="form-control" placeholder="Board Name"/> 
      <button 
      style="margin-top: 5px;" 
      @click.stop="addBoard" 
      class="btn btn-success btn-xs btn-block" 
      > 
      Add Board 
      </button> 
     </div> 
     </div> 
    </div> 
    ` 
}) 

這裏是VUE應用實例：

var boardItem = new Vue({ 
    el: "#board-item", 
    data: { 
    boards: [ 
     { name: 'learning vue 2' } 
    ], 
    newBoard: [], 
    viewNewBoard: true 
    }, 
    methods: { 
    displayNewBoard: function() { 
     event.preventDefault() 
     if(this.viewNewBoard == false) { 
     this.viewNewBoard = true 
     } else { 
     this.viewNewBoard = false 
     } 
    }, 
    addBoard: function() { 
     console.log('add board') 
    } 
    } 
}) 

現在，當我在從上述組分的Add Board點擊鏈接，它顯示這樣的錯誤：

Uncaught ReferenceError: addBoard is not defined at click (eval at Xr (vue.min.js:7), :2:455) at HTMLButtonElement.invoker (vue.min.js:6)

看起來組件中的按鈕找不到addBoard方法，它寫在同一個文件中！ 我在這裏錯過了什麼？

Answer 1

嘗試：

Vue.component('new-board', { 
    template: ` 
    <div> 
     <br/> 
     <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      Create New Board 
     </div> 
     <div class="panel-body"> 
      <input class="form-control" placeholder="Board Name"/> 
      <button 
      style="margin-top: 5px;" 
      @click.stop="addBoard" 
      class="btn btn-success btn-xs btn-block" 
      > 
      Add Board 
      </button> 
     </div> 
     </div> 
    </div> 
    `, 
    methods: { 
    addBoard: function(){ console.log('add board');} 
    } 
}) 

Answer 2

幾個在這裏的變化，如果你想與人交流都沒有關係，你必須使用一個新的VUE實例解僱這些事件，並聽取組件的事件。所以根據你的代碼這應該有所幫助。

window.Event = new Vue(); 

Vue.component('new-board', { 
    template: ` 
    <div> 
     <br/> 
     <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      Create New Board 
     </div> 
     <div class="panel-body"> 
      <input class="form-control" placeholder="Board Name"/> 
      <button 
      style="margin-top: 5px;" 
      @click.stop="addBoard" // keep this as the name of the local method 
      class="btn btn-success btn-xs btn-block"> 
      Add Board 
      </button> 
     </div> 
     </div> 
    </div> 
    `, 
    methods:{ 
     addBoard(){ 
      // fire the event, also you can add any params 
      Event.$emit('callAddBoard',data) 
     } 
    } 
}) 

和主實例應該聽那個事件

var boardItem = new Vue({ 
    el: "#board-item", 
    data: { 
    boards: [ 
     { name: 'learning vue 2' } 
    ], 
    newBoard: [], 
    viewNewBoard: true 
    }, 
    methods: { 
    displayNewBoard: function() { 
     event.preventDefault() 
     if(this.viewNewBoard == false) { 
     this.viewNewBoard = true 
     } else { 
     this.viewNewBoard = false 
     } 
    }, 
    addBoard: function() { 
     console.log('add board') 
    } 
    }, 

    created(){ 
     // here you listen and excute the remote event from component, and apply a local method. 
     Event.$on('callAddBoard', this.addBoard) 
    } 
}) 

至於我試過這個工程，你可以將事件發送到任何組件，而不需要經過主實例。