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

laravel, vue.js, api

VPS Starter Arubacloud
0 głosów
278 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 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

+1 głos
odpowiedź 19 czerwca 2018 przez ProgramistaStepek Nałogowiec (27,020 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 (13,190 p.)
nie pomogło :/
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (13,190 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,020 p.)
No to już zmienia postać rzeczy :) Poczytaj o CORS
+1 głos
odpowiedź 19 czerwca 2018 przez ShiroUmizake Nałogowiec (46,300 p.)
zmień na computed.
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (13,190 p.)
a coś więcej? Bo tak średnio wiem o co chodzi
komentarz 19 czerwca 2018 przez ShiroUmizake Nałogowiec (46,300 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 (13,190 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 (13,190 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ź 436 wizyt
pytanie zadane 30 czerwca 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
0 odpowiedzi 159 wizyt
pytanie zadane 28 grudnia 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)
0 głosów
1 odpowiedź 256 wizyt
pytanie zadane 15 sierpnia 2018 w JavaScript przez mi-20 Stary wyjadacz (13,190 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...