• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

laravel, vue.js, api

0 głosów
161 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,560 p.)

Witam,

zacząłem coś działać z API w Laravelu i Vue.js no i mam problem :D

mam kod w komponencie:

methods:{
          fetchArticles(){
            this.$http.get('http://127.0.0.1:8000/api/articles')
              .then(response => response.json())
              .then(result => this.articles = result)
          },
          created:function () {
            this.fetchArticles();
          }
      }

chce sb wyświetlić te dane:

<div v-for="article in articles" class="col-lg-2">
              <div class="window">
                <div class="title">
                  {{article.title}}
                </div>
              </div>
            </div>

jednak nic nie zostaje wyświetlone :/ tak samo w konsoli, tak jak by dane wgl nie były odbierane z API.

Postan wyświetla dane więc API jest raczej ok. Jakieś pomysły co może być błędem?

3 odpowiedzi

+2 głosów
odpowiedź 19 czerwca 2018 przez ProgramistaStepek Nałogowiec (27,260 p.)
wybrane 19 czerwca 2018 przez mi-20
 
Najlepsza

Wywal created z metod. Powinno być tak:

methods: {
   //metody
}, 
created() {
  //kod
}

 

komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,560 p.)
nie pomogło :/
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,560 p.)
dostaję jeszcze taki błąd w konsoli

Failed to load http://127.0.0.1:8000/api/articles: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.
1
komentarz 19 czerwca 2018 przez ProgramistaStepek Nałogowiec (27,260 p.)
No to już zmienia postać rzeczy :) Poczytaj o CORS
+1 głos
odpowiedź 19 czerwca 2018 przez ShiroUmizake Nałogowiec (45,600 p.)
zmień na computed.
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,560 p.)
a coś więcej? Bo tak średnio wiem o co chodzi
komentarz 19 czerwca 2018 przez ShiroUmizake Nałogowiec (45,600 p.)
Te dane są dynamiczne, więc Vue powinno je "przeliczać". Drugie masz podpiętą bibliotekę? Network coś krzyczy?
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,560 p.)
1, co mam zmienić na "computed"?

2. o jaką bibliotekę chodzi?

3. nie, network nie wyrzuca błędów
0 głosów
odpowiedź 20 czerwca 2018 przez mi-20 Stary wyjadacz (10,560 p.)

Teraz zacząłem zabawę z JWT, stworzyłem komponent logowania Login

 export default {
       data(){
         return{
            credential: {
                email: '',
                password: '',
            }
         }
       },
        methods:{
            login(){
              this.$http.post('http://127.0.0.1:8000/api/user/login', this.credential)
                .then(respone => respone.json())
                .then(result => {
                  console.log(result);
                  localStorage.setItem('token', result.token);
                });
            }
        },
        created:function () {

        }
    }

w Laravelu kontroler UserController

class UserController extends Controller
{
    public function login(Request $request){
        $userData = $request -> only('email', 'password');
        if (!$token = JWTAuth::attempt($userData)){
            return response()->json([
                'error' => 'Invalid login or password',
            ],401);
        }
        return response()->json([
            'token' => $token,
        ],200);
    }
}

próbując się zalogować i uzyskać token w konsoli otrzymuję błąd

POST http://127.0.0.1:8000/api/user/login 404 (Not Found)
login:1 Failed to load http://127.0.0.1:8000/api/user/login: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 404.
login:1 Uncaught (in promise) Response {url: "http://127.0.0.1:8000/api/user/login", ok: false, status: 0, statusText: "", headers: Headers, …}

nie mam pojęcia dlaczego API nie jest ładowane :/

Podobne pytania

0 głosów
1 odpowiedź 272 wizyt
pytanie zadane 30 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,560 p.)
0 głosów
0 odpowiedzi 44 wizyt
pytanie zadane 28 grudnia 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,560 p.)
0 głosów
1 odpowiedź 73 wizyt
pytanie zadane 15 sierpnia 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,560 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

67,186 zapytań

114,135 odpowiedzi

241,913 komentarzy

46,173 pasjonatów

Przeglądających: 289
Pasjonatów: 9 Gości: 280

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...