Blade 文件中的数据未在 Vue 组件中呈现

Question

I am working in Laravel Blade and trying to convert some blade files to vue components. I have a property in my blade file of pagetitle. I am trying to get the dynamically created page title to render on the screen from my vue component and not blade. But in my vue console, data comes back as "". Not sure why the data is carrying over.

Header.vue

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

    </template>



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

app.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 //where page title is being pulled from

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

Answer 1

In your Header.vue file you are defining pageTitle as a data property, while it should be defined as a prop , since you are actually providing it as a property on the header component.

props: {
    pageTitle: {
        type: String
    }
}

Answer 2

There already exists an HTML element called header , I suggest you rename your component. Your component is missing a props attribute to take input from blade:

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>

We created a title property. When the component is created, we set the component's pageTitle to the title given in 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://v2.vuejs.org/v2/guide/components-props.html