Sprawdzenie krótkiego kodu Vue.JS

Question

Dobry wieczór !

Napisałem krótki component Vue.Js (pod api Laravela) który pobiera id z linku a następnie wyświetla dane z bazy danych. Kod działa ale nie wiem czy nie odwaliłem fuszerki ^^

Głównie to chodzi o pobieranie ID z linku. Użyłem (this.uri + params) ale gdzieś na StackOverflow znalazłem inne rozwiązanie które działało u osoby z problemem ale nie u mnie. Tym rozwiązaniem było (this.uri, {params})

Jakby ktoś mógł sprawdzić kod i ewentualnie (Jeśli są) prostsze lub lepsze rozwiązania to byłbym bardzo wdzięczny :)

<template>
  <div v-if="singleNews">
    {{singleNews.title}}
  </div>
</template>

<script>
var axios = require("axios");
export default {
  
  
  data(){
    
    return {
      
      singleNews: [],
      uri: 'http://127.0.0.1:8000/api/blog-news/',
      
    }
    
  },
  
  methods: {
    
    loadData(){
      
      const params = window.location.pathname.split('/')[3];
      
      axios.get(this.uri + params).then(response=>{
        
      this.singleNews = response.data.news;
        
      });
    }
    
  },
  
  mounted() {
    this.loadData();
    console.log("component mounted");
  }
  
}

 

Answer 1

1, Jeśli korzystasz z vue-router użyj this.$route.query zamiast bawić się location.path (ux-owo jeszcze ładniej byłoby zdefiniować dynamiczny route z id) W tym momencie, jeśli zmieni się ścieżka do tego widoku, będzie trzeba poprawiać kod w komponencie. Ponadto błąd ten nie będzie widoczny od razu. Jeśli nie korzystasz z vue router, użyj window.location.search 

2. data singleNews powinno być na starcie nullem. Pusta tablica przechodzi przez ifa

3.

Użyłem (this.uri + params) ale gdzieś na StackOverflow znalazłem inne rozwiązanie które działało u osoby z problemem ale nie u mnie. Tym rozwiązaniem było (this.uri, {params})

Nie gdzieś na stacku czytałem i coś tam działało, tylko idziesz do dokumentacji i szukasz czego potrzebujesz https://github.com/axios/axios#example. 

4. import axios from "axios" - nie mieszaj dwóch systemów modułów linijka za linijką.

5. Nie zostawiaj console.log-ów. Są niepotrzebne i irytujące przy dalszym rozwijaniu kodu.

6. created zamiast mounted, Nie ma sensu czekać z requestem do API, aż komponent zostanie zamontowany w DOM-ie

7. Jeśli korzystasz z tego samego API w innych miejscach w aplikacji, warto zdefiniować baseURL dla axiosa

8. Raz piszesz literał stringu z " innym razem '. Sporo niepotrzebnych enterów. Polecam używać eslinta.

Comments

Hej, dziękuje za aż tak wyczerpującą odpowiedź ! Na pewno zastosuje się do wszystkich twoich rad.

Mam tylko jeszcze dwa pytania.

4: Nie zrozumiałem o co dokładnie chodzi. Czy o to, nie mogą być jeden pod drugi ?

  var axios = require("axios";
  var toastr = require('toastr');

I jeszcze pytanie dotyczące uwagi przedmówcy. Czy pobieranie danych jest poprawne czy musi być obowiązkowo tak jak pisał m4sk1n ?

Chodzi o dodanie obiektu ?

singleNew:{
id: NULL,
title: ''
},

 

---

4. "require" jest z CJS, niżej masz "export default" z ESM - używaj tylko ESM

2. singleNew: null

Answer 2

Co zrobiłeś nie tak — sprawdzasz „czy singleNews”. Ponieważ w funkcji zwracającej data przypisałeś do singleNews pustą tablicę (!![] === true), warunek ten jest spełniony od razu po zamontowaniu komponentu, nie jest spełniany tylko w przypadku gdy !!response.data.news === false. Warunkiem może być if singleNews.title, lub możesz ustawić w funkcji data singleNews jako np. undefined.

Poza tym wpisałeś tu tablicę zamiast obiektu

Comments

Hej dzięki za odpowiedź. Jesteś pewien co do tablic ? W dwóch kursach dwóch różnych instruktorów używało tablic nawet do updatu pojedynczych obiektów.

Po wysłaniu obiektu i odebraniu go przez Axios'a, vuejs sypie mi błędami

Co do warunku to faktycznie moje niedopatrzenie ^^