Question

当我尝试将会话变量绑定为我的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指令时，组件加载没有任何问题。那么也许会话中传递的数据有问题？我用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

这是您不需要绑定语法的情况。由于消息值来自服务器，它基本上是一个静态值客户端，message="value"完全正常。

您会收到语法错误，因为当您使用绑定语法时，（v-bind或:）Vue将尝试查找名称为引号之间的任何内容的变量。假设你的渲染输出结束了

v-bind:message="Hello World"

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

绑定会话变量后出现Vue语法错误

1 个答案: