Laravel 和 VueJS：在 Blade 中调用 VueJS 方法

Posted 2023-02-22

【中文标题】Laravel 和 VueJS：在 Blade 中调用 VueJS 方法

【英文标题】：Laravel & VueJS: Call VueJS Method Inside Blade

【发布时间】：2018-10-13 11:09:04

【问题描述】：

我一直在寻找解决问题的方法和参考资料。我很困惑通过外部按钮调用 VueJs 组件内部的 vue 方法（例如：createItem() ...）。

这是我的“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

<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

<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 -->

我已阅读指南，但仍然失败。对不起这个新手问题，我刚刚使用了 VueJS。谢谢大家的帮助。

【问题讨论】：

这是一个方法调用而不是一个变量，因此：@click="createItem()"

谢谢@ka_lin，我想通过外部按钮（外部组件）调用 createItem()。

第一：按钮前的div没有关闭，第二：为什么？从技术上讲，您可以通过全局 app 访问并在点击事件上创建一个常规 JS，您可以使用 app 变量

如果是这样，它会显示为：[Vue 警告]：属性或方法“createItem”未在实例上定义，但在渲染期间被引用。作为参考问题，我将代码缩写，已解决问题。

检查this和a clean way to comunicate between components

【参考方案1】：

您的标记已损坏，因为<button> 以</a> 而不是</button> 关闭

<button ... @click="createItem" id="external-button">Create...</a>

另外，createItem 是一个函数，所以一定要加上括号！

更正的代码：

<button type="button" class="btn btn-sm" @click="createItem()" id="external-button">Create new item</button>

【参考方案2】：

您可以使用ref 来调用孩子的方法：

标记：

<div id="app>
  <sample ref="child"></sample>
  <button type="button" class="btn btn-sm" @click="callChildCreateItem" id="external-button">Create new item</a>
</div>

家长：

const app = new Vue(
    el: '#app',
    methods: 
        callChildCreateItem: function() 
            this.$refs.child.createItem()
        
    
);

或者，您可以使用事件（也许是一个插件like 这会让事情变得更容易）

家长：

const app = new Vue(
    el: '#app',
    methods: 
        callChildCreateItem: function() 
             this.$events.fire('childCreateItem')
        
    
);

孩子：

  export default 
        ...
        methods: 
           ...
            createItem()
                ...
            ,
        ,
        events: 
          childCreateItem () 
            this.createItem()
          
        ,
    

通过：https://***.com/a/47565763/965452