laravel, vue.js, api

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

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

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

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 :/