[英]Laravel & VueJS: Call VueJS Method Inside Blade
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 SampleComponent.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. 对这个新手问题很抱歉,我刚刚使用了VueJS。 Thank you for all the help. 感谢您的所有帮助。
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, createItem
is 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>
You could use a ref
to call child's method: 您可以使用ref
来调用child的方法:
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 like this 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()
}
},
}
via: https://stackoverflow.com/a/47565763/965452 通过: https : //stackoverflow.com/a/47565763/965452
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.