Laravel 和 VueJS：在 Blade 内部调用 VueJS 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50149909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel & VueJS: Call VueJS Method Inside Blade
提问by lrfahmi
I've been looking for solutions and references to my problems. I am confused to call a vue method (ex: createItem() {...}) that is inside the VueJs component via an external button.
我一直在寻找解决方案和参考我的问题。我很困惑通过外部按钮调用 VueJs 组件内部的 vue 方法（例如：createItem() {...}）。
Here my "app.js"
这是我的“app.js”
// ..\resources\assets\js\app.js
require('./bootstrap');
window.Vue = require('vue');
window.Vue.prototype.$http = axios;
Vue.component('sample', require('./components/SampleComponent.vue'));
const app = new Vue({
el: '#app',
methods: {
createItem: function() {
// what's here?
}
}
});
SampleComponent.vue
示例组件.vue
<template>
...
</template>
<script>
export default {
mounted() {
this.getItems();
},
data() {
return {
items: [],
newItem: {'name': '', 'description': ''},
fillItem: {'id': '', 'name': '', 'description': ''}
}
},
methods: {
getItems() {
axios.get( 'api/data' ).then( response => {
let answer = response.data;
this.items = answer;
})
},
clearItem(){
this.newItem = {'name': '', 'description': ''};
this.fillItem = {'id': '', 'name': '', 'description': ''};
},
createItem(){
var self = this;
$("#create-role").on("hidden.bs.modal", function () {
self.clearItem();
}).modal('show');
},
}
}
</script>
index.blade.php
index.blade.php
<div id="app>
...
<!-- Load samplecomponent to blade -->
<sample></sample>
<!-- An external button to call method inside SampleComponent.vue, How can I do this? -->
<button type="button" class="btn btn-sm" @click="createItem" id="external-button">Create new item</a>
</div> <!-- End App -->
I've read the guide, but it still fails. Sorry for this newbie question, I just used VueJS. Thank you for all the help.
我已经阅读了指南，但它仍然失败。抱歉这个新手问题，我刚用过 VueJS。谢谢大家的帮助。
采纳答案by Ben V.
Your markup is broken because the <button>is closed with </a>instead of </button>
您的标记已损坏，因为<button>关闭</a>而不是</button>
<button ... @click="createItem" id="external-button">Create...</a>
Also, createItemis a function so make sure to add parentheses!
另外，createItem是一个函数，所以一定要加括号！
Corrected code:
更正的代码：
<button type="button" class="btn btn-sm" @click="createItem()" id="external-button">Create new item</button>
回答by nachodd
You could use a refto call child's method:
您可以使用 aref来调用孩子的方法：
Markup:
标记：
<div id="app>
<sample ref="child"></sample>
<button type="button" class="btn btn-sm" @click="callChildCreateItem" id="external-button">Create new item</a>
</div>
Parent:
家长：
const app = new Vue({
el: '#app',
methods: {
callChildCreateItem: function() {
this.$refs.child.createItem()
}
}
});
Or, you could use events (maybe a plugin likethis make things easier)
或者，您可以使用事件（也许像这样的插件可以让事情变得更容易）
Parent:
家长：
const app = new Vue({
el: '#app',
methods: {
callChildCreateItem: function() {
this.$events.fire('childCreateItem')
}
}
});
Child:
孩子：
export default {
...
methods: {
...
createItem(){
...
},
},
events: {
childCreateItem () {
this.createItem()
}
},
}
