Laravel Vue Компоненты могут передавать только цифры?

Question

В моем UserMenu. vue я написал:

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

и в клинке. php

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

Это прекрасно работает, но только если я использую числа: - (Если я использую, например, {{ab c}}, это выдаст ошибку

Использование неопределенной константы ab c - предполагается, что 'ab c' (это вызовет Ошибка в будущей версии PHP)

Если я использую {{'ab c'}}, вместо этого ничего не передается. Как я могу передать нечисловые значения? Или в чем ошибка ?

Answer 1

Проблема в том, что вы пытаетесь использовать v-bind для строкового литерала.

Вместо этого вам нужно:

<usermenu name-val="abc">

или если вы настаиваете на использовании разметки лезвия

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

Примечание: В атрибуте нет префикса v-bind или :.

---

Проблема в том, что при использовании v-bind ожидает выражения . Если у вас есть это в 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' }}`">