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="用户名"

如何从blade.php模板向单页VUEJS组件传递参数？

Answer 1

像这样

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

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

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

VueJS - how pass input parameters to the single page component

laravel

vue.js

vuejs2

vue-component

vue-props