Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
vue.js API data bleibt leer
#1
Moin Kinners,

ich benötige mal einen Rat.
Ich habe eine API gebaut, das ist der Code dazu:

PHP-Code:
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

include 
'../DBconnect.php';

$rslt $pdo->query("SHOW TABLES");
$songs_random['data'] = array();
while (
$db_table $rslt->fetch(PDO::FETCH_NUM)) {
    $sql "SELECT id, title, textauthor, musicauthor, genre FROM `$db_table[0]` ORDER BY RAND() LIMIT 3";    
    
foreach ($pdo->query($sql) as $row) {
        $song_items = array(
            'id' => $row['id'],
            'title' => $row['title'],
            'textauthor' => $row['textauthor'],
            'musicauthor' => $row['musicauthor'],
            'genre' => $row['genre']
        );
        array_push($songs_random['data'], $song_items);
    }
}
echo 
json_encode($songs_random); 

So sieht das dann im Browser aus:

[Bild: Bildschirmfoto.png]

Und so versuche ich die Daten in vue.js darzustellen:

Code:
<template>
    <div class="container-sm text-center mt-4">
        <div class="container-sm mt-3">
            <h3>Hier eine zufällige Auswahl aus der Musik Datenbank.</h3>
        </div>
        <div class="container-sm text-justify mt-5">
            <ul>
                <li v-for="item in items" :key="item.id">{{ item.title }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    mounted(){
    window.addEventListener("load", () => this.songsRandom());
    },
    data() {
        return {
        items:[]
        }
    },
    methods: {
        async songsRandom() {
            let apiURL = 'https://gracile-software.de/projects/service-api/xxxxxxxx/xxxx/xxxxxx.php';
            try {
                let response = await this.axios.get(apiURL);
                this.items = response.data;
                console.log(response.data);
            } catch (e) {
                console.log(e);
            }
        }
    }
}
</script>


Doch leider bleibt die Liste leer. In der Console kann ich alle Daten in der richtigen Reihenfolge sehen. Der EventListener ist erstmal nur zum Testen drin, das bau ich später um.

Hat mir wer einen Tipp, wo der Fehler liegen kann? Ich sehe ihn leider nicht.

Vielen Dank!
Schwarzer Humor ist wie essen, hat nicht jeder.
Zitieren


Nachrichten in diesem Thema
vue.js API data bleibt leer - von BastiBln - 13.10.2023, 07:34
RE: vue.js API data bleibt leer - von BastiBln - 19.10.2023, 14:09

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste