Данные из блейд-файла не отображаются в Vue компоненте

Question

Я работаю в Laravel Blade и пытаюсь преобразовать некоторые файлы blade-серверов в vue компоненты. У меня есть свойство в моем файле клинка pagetitle. Я пытаюсь получить динамически созданный заголовок страницы для отображения на экране из моего компонента vue, а не из лезвия. Но в моей консоли vue данные возвращаются как "". Не уверен, почему данные переносятся.

Заголовок. vue

    <template>
        <div>
            <p title="page-title">{{pageTitle}}</p>
        </div>

    </template>



   <script>
     export default {
     props: {
        pageTitle: {
            type: String
        }
      }
    }
  </script>

приложение. js

    window.Vue = require('vue');

    import Header from './components/Header';
    Vue.component('header', Header);

    const app = new Vue({
        el: '#app',
    });

main.blade. php

<div id="app">
    <header :page-title="{{$pageTitle}}"></header>
</div>

header.blade. php // откуда заголовок страницы извлекается из

    <title>
        {{ $pageTitle ?? 'Default Page Title' }}
    </title>

Answer 1

Уже существует элемент HTML с именем header , я предлагаю вам переименовать ваш компонент. В вашем компоненте отсутствует атрибут props для ввода данных с лезвия:

Pagetitle. vue:

<template>
    <div>
        <p title="page-title">{{ this.pageTitle}}</p>
    </div>
</template>

<script>
    export default {
        props: ['title'],
        data() {
            return {
                pageTitle: '',
            };
        },
        created() {
            this.pageTitle = this.title
        }
    }
</script>

Мы создали свойство title. Когда компонент создан, мы устанавливаем pageTitle компонента на title, указанное в main.blade.php.

app. js

window.Vue = require('vue');

import Pagetitle from './components/Pagetitle';
Vue.component('pagetitle', Pagetitle);

const app = new Vue({
   el: '#app',
});

main.blade. php

<div id="app">
    <pagetitle :title="foo bar"></pagetitle>
</div>

https://vuejs.org/v2/guide/components-props.html

Answer 2

В вашем файле Header. vue вы определяете pageTitle как свойство данных, тогда как оно должно быть определено как prop, поскольку вы фактически предоставляете его как свойство для компонента header.

props: {
    pageTitle: {
        type: String
    }
}