[Vuejs]-Put vue variable with mounted on section('title')

by

0👍

The Blade template directives are processed in the server and a response sent to the client.

After this, Vue template directives are processed in the browser.

On that account, the later example with the escaped Vue mustache works as expected as the block below is sent to the browser as a part of the overall response content.

   <div id="pagetitle">
     {{pagetitle}}
   </div>

The Vue program running in the browser then runs, and interpolates variables in this template.

For the former example,

@section('title', @{{pagetitle}})

will result in an error in the server when it tries to compile the section as the second parameter is not given as a string.

This error can be corrected by quoting the escaped Vue mustache.

@section('title', '@{{pagetitle}}')

EDIT: {{pagetitle}} is not compiled is in document head

The Vue instance that is created is mounted on an element contained in the body. For this reason, compilation happens only on the document tree of the element that the Vue instance is mounted on.

I suggest to create a separate Vue instance to manage the head of the document. e.g.

const helmet = new Vue({
    el: 'head',
    data: {
        pagetitle:'',
    },

    mounted() {
        this.fetchArticlesPage();
    },

    methods: {
        fetchArticlesPage(page_url) {
            page_url = '/api/articles/news';
            fetch(page_url)
            .then(res => res.json())
            .then(res => this.pagetitle = res.page_title)
            .catch(err => console.log(err));
        },

    }
})

0👍

u can try this

@section(‘title’, @pagetitle)

Leave a comment