在我的 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"
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' )
}
}
} )
现在,当我单击上述组件中的添加板
按钮时,它显示以下错误:
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
方法,它是写在同一个文件中的!
我在这里缺少什么?
最佳答案
尝试:
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 : Unable to find method on click event from component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42145380/