javascript - 绑定(bind) session 变量后Vue语法错误

Question

当我尝试将 session 变量绑定(bind)为 vue 组件的 prop 时，出现此语法错误。我检查了我的代码，但没有发现代码中的错误。但我希望更多的眼睛能够发现一些东西。

这是我注册组件的地方:

Vue.component('fav-btn', require('../components/FavBtn.vue'));
Vue.component('fund-btn', require('../components/FundBtn.vue'));
Vue.component('flash-msg', require('../components/FlashMsg.vue'));

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

这是给我带来麻烦的组件:

<template>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        text here
    </div>
</template>

<script>
    export default{
        name: 'FlashMsg',

        props: ['message'],

        data(){
            return{

            }
        }
    }
</script>

以下是我认为如何使用它:

<flash-msg v-bind:message="{{ session('message') }}"></flash-msg>

在这里，当我删除绑定(bind)指令时，组件加载没有任何问题。那么 session 中传递的数据是否有问题？我使用 Laravel 作为后端。

这是错误:

[Vue warn]: Failed to generate render function:

SyntaxError: Unexpected token } in

with(this){return _c('div',{attrs:{"id":"app"}},[_c('flash-msg',{attrs:{"message":}}),

Answer 1

这是您不需要绑定(bind)语法的情况。由于消息值来自服务器，因此它基本上是静态值客户端，并且 message="value" 完全没问题。

你会得到语法错误，因为当你使用绑定(bind)语法时，(v-bind 或 :)Vue 会尝试查找一个以任何结尾的名称的变量放在引号之间。假设您的渲染输出最终是

v-bind:message="Hello World"

然后，Vue 将在 javascript 上下文中评估 Hello World，以找出 Hello World 的值。显然，Hello World 不是有效的 JavaScript 表达式，会导致语法错误。