• 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
148 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,260 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,060 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,260 p.)
nie pomogło :/
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,260 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,060 p.)
No to już zmienia postać rzeczy :) Poczytaj o CORS
+1 głos
odpowiedź 19 czerwca 2018 przez ShiroUmizake Nałogowiec (44,700 p.)
zmień na computed.
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,260 p.)
a coś więcej? Bo tak średnio wiem o co chodzi
komentarz 19 czerwca 2018 przez ShiroUmizake Nałogowiec (44,700 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,260 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,260 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ź 235 wizyt
pytanie zadane 30 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,260 p.)
0 głosów
0 odpowiedzi 34 wizyt
pytanie zadane 28 grudnia 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,260 p.)
0 głosów
1 odpowiedź 68 wizyt
pytanie zadane 15 sierpnia 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,260 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

64,043 zapytań

110,429 odpowiedzi

231,263 komentarzy

47,812 pasjonatów

Przeglądających: 262
Pasjonatów: 19 Gości: 243

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.

...