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

Question

I'm trying to pass data from vue component to blade file. I try to create props but it's didn't work for me. Is it any possible to pass the object to props to get the data? I'm new laravel. I want to pass data which subject, message, days, condition and module name to blade file(view) . I kept searching for this but couldn't find an answer that will make this clear.

Thanks!

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>

Answer 1

Quick solution. : why not store data in local storage and fetch it from laravel blade ? Next solution: you can fire global event from vue and listen on laravel blade .

Answer 2

why dont you send the data through ajax post call and get the data from the controller ? then pass the data object to blade template.