Laravel Vue组件只能传递数字吗? [英] Laravel Vue Components can only pass numbers?

问题描述

在我的UserMenu.vue中，我写道:

In my UserMenu.vue i wrote:

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

和blade.php

and in the blade.php

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

这很好，但仅当我使用数字时:-(如果我使用例如{{abc}}，它将抛出错误

This works fine, but only if i use numbers :-( if i use for example {{ abc }} it will throw an error

使用未定义的常量abc-假定为"abc"(在以后的PHP版本中将引发错误)

Use of undefined constant abc - assumed 'abc' (this will throw an Error in a future version of PHP)

如果我使用{{'abc'}}，则不会传递任何内容.如何传递非数值?还是有什么错误?

If I use {{ 'abc' }} instead nothing is passed. How can I pass non numerical values? Or what is the error?

推荐答案

问题是您正试图将 v-bind 用作字符串文字值.

The issue is that you're trying to use v-bind for a string literal value.

您想要的是

<usermenu name-val="abc">

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

or if you insist on using blade markup

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

注意:该属性上没有 v-bind 或:前缀.

Note: There is no v-bind or : prefix on the attribute.

问题在于，使用 v-bind 会期望表达式.当您在PHP中拥有此功能时...

The problem is that using v-bind expects an expression. When you have this in PHP...

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

结果标记是...

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

因此Vue将寻找 abc 数据属性(或类似属性).如果必须使用 v-bind ，则需要创建一个字符串文字表达式.例如

so Vue would be looking for an abc data property (or similar). If you must use v-bind, you need to create a string literal expression. For example

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

这篇关于Laravel Vue组件只能传递数字吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！