javascript - Vue 2:无法找到组件中单击事件的方法

在我的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按钮时，它显示此错误：


  未捕获的ReferenceError：未定义addBoard
      点击时（在Xr（vue.min.js：7），：2：455评估）
      在HTMLButtonElement.invoker（vue.min.js：6）


组件中的按钮似乎找不到在同一文件中编写的addBoard方法！
我在这里想念什么？

最佳答案

尝试：

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

关于javascript - Vue 2:无法找到组件中单击事件的方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42145380/