• 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
160 wizyt
pytanie zadane 19 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,460 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,220 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,460 p.)
nie pomogło :/
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,460 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,220 p.)
No to już zmienia postać rzeczy :) Poczytaj o CORS
+1 głos
odpowiedź 19 czerwca 2018 przez ShiroUmizake Nałogowiec (45,360 p.)
zmień na computed.
komentarz 19 czerwca 2018 przez mi-20 Stary wyjadacz (10,460 p.)
a coś więcej? Bo tak średnio wiem o co chodzi
komentarz 19 czerwca 2018 przez ShiroUmizake Nałogowiec (45,360 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,460 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,460 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ź 267 wizyt
pytanie zadane 30 czerwca 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,460 p.)
0 głosów
0 odpowiedzi 43 wizyt
pytanie zadane 28 grudnia 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,460 p.)
0 głosów
1 odpowiedź 71 wizyt
pytanie zadane 15 sierpnia 2018 w JavaScript, jQuery, AJAX przez mi-20 Stary wyjadacz (10,460 p.)
Porady nie od parady
Zadając pytanie postaraj się o poprawną pisownię i czytelne formatowanie tekstu.Kompozycja

66,494 zapytań

113,266 odpowiedzi

239,865 komentarzy

46,631 pasjonatów

Przeglądających: 111
Pasjonatów: 2 Gości: 109

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.

...