Vue.js w templatce blade Laravela

0

Usiłuję nauczyć się czegokolwiek o Vue i zaczynając od przewodnika na oficjalnej stronie, tworzę w pliku app.js następującą instancję:

var app = new Vue({
el: '#app',
data: {
    message: 'Hello world'
}
})

W pliku home.blade.php;

<div id="app">
  <test></test>//komponent, on akurat wyświetla się poprawnie
  @{{message}}
</div>

Użyłem @ zgodnie z radami z internetu, ponieważ Laravel również stosuje notację {{}} i informuje o błędzie w razie braku @, ale zamiast oczekiwanego "Hello World" wyświetla się po prostu "{{message}}". Gdzie może leżeć problem, skoro komponent wyświetla się poprawnie?

EDIT: Niespodziewanie problem "sam się rozwiązał". Użyłem npm run watch i w końcu dostrzegłem, że jednak działa poprawnie. Niestety nic nie wiem o tego typu narzędziach, więc nie mam pojęcia dlaczego wygląd się nie aktualizował wcześniej.

1

Przy rozwiązywaniu problemów z JavaScript (np z Vue) raczej czytaj już wygenerowany kod, ten który zobaczysz w swojej aplikacji po kliknięciu "Pokaż źródło". Template'y, takie jak blade, mogą się wydawać poprawne, ale nie masz parsera w oczach, więc możesz coś przeoczyć. To co jest w "Pokaż źrodło" to na 100% jest to co się wykonuje w Vue.

PS: Jeśli chcesz korzystać z Vue+Laravel, porponuję skorzystaj z Laravel Mix, to jest webpack+laravel+vue, z tego co pamiętam. On ma odseparowany widok laravela od widoku Vue, dzięki czemu takie smaczki jak @{{}} nie będą Ci stawać na drodze.

1 użytkowników online, w tym zalogowanych: 0, gości: 1