Почему я получаю неопределенную постоянную ошибку в Laravel? - PullRequest
1 голос
/ 14 марта 2020

Я пытаюсь заставить мой самый первый Vue код работать в Laravel, но Vue, похоже, не работает для меня, и я действительно не уверен, почему.

Курсы Vue Mastery бесплатны в эти выходные - они обычно стоят больше, чем я могу себе позволить - поэтому я хочу воспользоваться этой возможностью, чтобы правильно выучить Vue. К сожалению, мой самый первый урок по основам Vue не сработает.

Вот мой код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping List App</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>
    <div id="shopping-list">
        <h1>{{ header }}</h1>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#shopping-list',
            data: {
                header: 'Vue is ready to party!'
            }
        });
    </script>
</body>
</html>

Я не вижу НИКАКОЙ разницы между этим и показанным кодом конечно, за исключением того, что у меня есть другой файл CSS в другом месте. (Этот файл существует, и я правильно указал местоположение, потому что Laravel не может найти его.)

Вот сообщение об ошибке:

Facade\Ignition\Exceptions\ViewException
Use of undefined constant header - assumed 'header' (this will throw an Error in a future version of PHP) (View: C:\Laravel\Somers02\resources\views\VueBasics\lesson01.blade.php)
http://localhost:8002/VueBasics/lesson01 

Ошибка ссылается на строку 10 код:

 <h1>{{ header }}</h1>

Я подумал, что, возможно, «заголовок» был зарезервированным словом, поэтому я попытался изменить его на что-то, что почти наверняка не является зарезервированным словом - hdrx - в обоих местах, но это не сработало лучше В курсе предполагается, что учащиеся НЕ используют Laravel, просто старый HTML / CSS / JavaScript, поэтому я предполагаю, что мне нужно что-то сделать в Laravel, чтобы сделать эту работу.

Ответы [ 4 ]

1 голос
/ 14 марта 2020

Вы можете избежать лезвия Laravel, добавив знак @ перед двойными скобками {{}} или {!! !!} HTML для рендеринга скобок.

Вот пример:

<div>
  <!-- HTML rendering with VueJS -->
  @{{ selectedQuestionDesc }} 
  <!-- Data binding with VueJS -->
  @{{ selectedQuestionDesc }}
</div>
<div>
  <!-- HTML with Laravel Blade -->
  {!! $selectedQuestionDesc !!}
  <!-- Variable binding with Laravel Blade -->
  {{ $selectedQuestionDesc }} 
</div>
1 голос
/ 14 марта 2020

Полагаю, у вас это есть в блейд-файле, где синтаксис {{}} также является синтаксисом блейда

https://laravel.com/docs/7.x/blade

Выполнен заголовок как PHP, а не в VUE или javascript, поэтому «заголовок» обрабатывается как константа, поскольку он не является переменной, функцией или чем-либо еще.

1 голос
/ 14 марта 2020

Vue и Laravel оба используют {{}}, поэтому вы должны указать лезвию игнорировать код Laravel, поставив перед ним "@"

@{{header}}
0 голосов
/ 14 марта 2020

Вам необходимо изменить разделители для vuejs, так как laravel разделители одинаковы. ie.

    new Vue({
        delimiters: ['{(', ')}'],
        el: '#shopping-list',
        data: {
            header: 'Vue is ready to party!'
        }
    });

И в поле зрения

<h1>{( header )}</h1>

В вашем коде {{ header }} означает <?php echo header ?>, а header рассматривается как php константа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...