laravel - VueJS - 如何将输入参数传递给单页组件

Question

我用 Laravel ，并且我不想将参数传递给单个页面 VUEJS 组件 来自 Blade.php 模板。 <example-component :userName="{{ Auth::user()->name }}"></example-component >在我的 app.js 文件，我有一个代码:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');

import 'es6-promise/auto';

import store from './store'

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

这是我的 的代码ExampleComponent.vue :

<template>
<div>
    {{userName}}
</div>
</template>

<script>
export default {
    props: ['userName'],
    data(){
        return {
            temperature: ''
        }
    },
    computed: {

    },
    methods: {
    }
}
</script>

<style>

</style>

我有错误
[Vue 警告]:编译模板时出错:
无效表达式: 中出现意外标识符

user name

原始表达式::username="用户名"
单页如何传参数 VUEJS 组件 来自 Blade.php 模板？

Answer 1

像这样

<example-component user-name="{{ Auth::user()->name }}"></example-component>

使用 kebab case ，因为 HTML 不区分大小写。
Remove the colon因为你没有在做 JavaScript 表达式