Javascript Vue 2:无法从组件中找到单击事件的方法
在我的vue应用程序中,我正在调用位于组件中的单击事件函数。以下是组件代码:Javascript Vue 2:无法从组件中找到单击事件的方法,javascript,vuejs2,Javascript,Vuejs2,在我的vue应用程序中,我正在调用位于组件中的单击事件函数。以下是组件代码: Vue.component( 'new-board', { template: ` <div> <br/> <div class="panel panel-primary"> <div class="panel-heading"> Create New Board </div&g
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>
`
} )
现在,当我单击上面组件中的添加电路板
按钮时,它显示此错误:
未捕获引用错误:未定义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');}
}
} )
Vue.component('new board'{
模板:`
创建新板
添加板
`,
方法:{
addBoard:function(){console.log('addBoard');}
}
} )
此处有一些更改,如果要与不相关的组件共享事件,则必须使用新的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)
}
}
} )
据我所知,这是可行的,您可以向任何组件发送事件,而无需通过主实例。组件无法直接调用父Vue上定义的方法。您需要在组件上定义addBoard。
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)
}
} )