如何将数据从 vue 组件传递到 laravel 中的视图（HTML）

Posted 2023-03-14

【中文标题】如何将数据从 vue 组件传递到 laravel 中的视图（HTML）

【英文标题】：How to pass data from vue component to view(HTML) in laravel

【发布时间】：2020-06-16 12:38:19

【问题描述】：

我正在尝试将数据从 vue 组件传递到刀片文件。我尝试创建道具，但它对我不起作用。是否可以将对象传递给道具以获取数据？我是新拉拉维尔。 我想将主题、消息、日期、条件和模块名称的数据传递给刀片文件（视图）。 我一直在寻找这个，但找不到一个能说明这一点的答案。

谢谢！

blade.php

  <div id="app">
       <email-component
          email_edit_route=" route('havence.automail.edit',['id'=>$mailTemplates->id]) "
       >
       </email-component>

 </div>

Vue.js

<script>
    import Vue from 'vue'
    import axios from 'axios'
    import MarkdownIt from 'markdown-it'
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    var msg_editor;


    const md = new MarkdownIt(
        linkify: true
    )

  export default 
    props: ['email_creation_link', 'email_index_route', 'email_edit_route','conditions','modules'],

    components: 

    ,


    data() 
        return 
            template: 
                subject: '',
                message: '' ,
                days: '',
                condition_id: 1,

            ,
            options:[
                
                    display:'Client Name',
                    actual:'Client name'
                , 
                
                    display:'Joined Date',
                    actual:'Joined date'
                ,
                
                    display:'Module Name',
                    actual:'Module name'
                ,
                
                    display:'Last Seen',
                    actual:'Last seen'
                ,
            ],


              showName: false,


        
    ,


    mounted()
             var self = this;

            ClassicEditor
            .create(document.querySelector( "#msg"),
                
                )
            .then(editor => 
                msg_editor = editor;
                editor.model.document.on( 'change:data', () => 
                    self.template.message = msg_editor.getData();
                );
            )

            .catch(error => 
                console.error(error);
            )

        , 

    methods: 

        //Drag items
        dragstart: function(item, e)
            this.draggingItem = item;
            e.dataTransfer.setData('text/plain', item.actual);
        ,
        dragend: function(item,e) 
            e.target.style.opacity = 1;
        ,
        dragenter: function(item, e) 
            this.draggingItem = item;
        ,
        //content
        replaceVariables(input)
        
            let updated = input
            return updated
        ,
        //hidecontent
        showHide: function(e)
        
            console.log("Show "+e.target.value+ " fields")
            this.showName = e.target.value !== ''
        ,
        fetch()
        
            //request data
            axios.get(this.email_index_route,this.template)
                .then((res) => 
                    this.template = res.data.template;

                )
        ,
        save()
        
            //save data to db
            axios.post(this.email_index_route, this.templates)
                .then((res) => 
                    alert('Mail sent successfull!')
                )
        ,
        addToMail: function(type, text)
        
            if (type == 'message') 
                this.template.message += text;
                msg_editor.setData(this.template.message);
            
        ,

        //user name replace
        replaceVariables() 
            return this.replaceVariables(this.options || '')
        ,
    
  
</script>

【参考方案1】：

快速解决方案。 ：为什么不将数据存储在本地存储中并从 laravel Blade 中获取？ 下一个解决方案：您可以从 vue 触发全局事件并在 laravel Blade 上收听。

【讨论】：

我将如何在本地存储中存储数据并从 laravel Blade 中获取数据。你有什么例子吗？我是新拉拉维尔。 @拉维

@NavanithaMoorthy 您想在数据保存到 DB r/从您的发布请求返回成功响应后将数据传递给刀片吗？

是的，一旦数据保存到数据库，我想将数据传递给刀片。我将如何做到这一点我找不到任何方法

@NavanithaMoorthy 抱歉回复晚了。你可以使用 laravel 广播来触发和监听事件。 laravel Broadcasting。即你从 Laravel 控制器触发和事件，你可以在 vue 组件中监听该事件。

【参考方案2】：

为什么不通过 ajax post call 发送数据并从控制器获取数据？ 然后将数据对象传递给刀片模板。

【讨论】：

但是在VUE js中可以使用ajax方法吗？