Laravel Vue 组件只能传数字？

Question

在我的 UserMenu.vue 中我写道：

export default {
        props: ['nameVal'],
        data () {
            return {
            }
        }
    }

在blade.php中

<usermenu v-bind:name-val='{{ 111 }}'>

这很好，但只有当我使用数字时:-(如果我使用例如 {{ abc }} 它会抛出一个错误

使用未定义的常量 abc - 假定为“abc”（这将在 PHP 的未来版本中引发错误）

如果我使用 {{ 'abc' }} ，则不会传递任何内容。如何传递非数值？或者是什么错误？

Answer 1

问题是您正在尝试将v-bind 用于字符串文字值。

你想要的是

<usermenu name-val="abc">

或者如果你坚持使用刀片标记

<usermenu name-val="{{ 'abc' }}">

注意：属性上没有v-bind或:前缀。

---

问题在于使用v-bind expects an expression。当你在 PHP 中有这个...

<usermenu v-bind:name-val="{{ 'abc' }}">

生成的标记是...

<usermenu v-bind:name-val="abc">

所以 Vue 会寻找 abc 数据属性（或类似属性）。如果必须使用v-bind，则需要创建字符串文字表达式。例如

<usermenu v-bind:name-val="'{{ 'abc' }}'">
<!-- or -->
<usermenu v-bind:name-val="`{{ 'abc' }}`">