Vue 2：コンポーネントからclickイベントのメソッドを見つけることができません

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

に耳を傾けなければならない、とあなたは、メインインスタンスを通過する必要なく、任意のコンポーネントにイベントを送信することができます。