Директивы шаблона Blade обрабатываются на сервере, а клиенту отправляется ответ.
После этого директивы шаблона Vue обрабатываются в браузере.
В этом случае позжепример с экранированными усами Vue работает как положено, так как приведенный ниже блок отправляется в браузер как часть общего содержимого ответа.
<div id="pagetitle">
{{pagetitle}}
</div>
Программа Vue, запущенная в браузере, затемвыполняется и интерполирует переменные в этом шаблоне.
Для предыдущего примера
@section('title', @{{pagetitle}})
приведет к ошибке на сервере, когда он попытается скомпилировать раздел, поскольку второй параметр незадается в виде строки.
Эту ошибку можно исправить, заключив в кавычки Vue усы .
@section('title', '@{{pagetitle}}')
РЕДАКТИРОВАТЬ : {{pagetitle}} не скомпилировано - находится в заголовке документа
Созданный экземпляр Vue монтируется в элемент, содержащийся в теле.По этой причине компиляция происходит только в дереве документа элемента, к которому подключен экземпляр Vue.
Я предлагаю создать отдельный экземпляр Vue для управления заголовком документа.например,
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));
},
}
})