javascript - 如何将数据从vue组件传递到laravel中的 View (HTML)

Question

我正在尝试将数据从 vue 组件传递到 Blade 文件。我尝试创建 Prop ，但它对我不起作用。是否可以将对象传递给 props 来获取数据？我是新来的拉拉维尔。 我想将主题、消息、日期、条件和模块名称的数据传递到 Blade 文件( View )。 我一直在寻找这个问题，但找不到可以明确这一点的答案。

谢谢!

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

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