Ankündigung

Einklappen
Keine Ankündigung bisher.

Demo API mit Vue

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Demo API mit Vue

    https://pastebin.com/uyp5VM4Z
    Was muss ich machen, dass beim öffnen der Seite nicht das https://prnt.sc/s9faru passiert. ( Also, dass so etwas {{stats.jobs}} dort nicht steht

  • #2
    Vue nicht in der Funktion starten sondern direkt beim Load der Seite

    Kommentar


    • #3
      wie meinst du das? was müsste ich ändern ?

      Kommentar


      • #4
        Eine Möglichkeit:
        HTML-Code:
        <div id="app" style="display: none;">
        und dann oben in der Funktion getData:
        Code:
        document.getElementById('app').style.display="block";
        Nützlich ist bei solchen Projekten die Web-Konsole des Browsers.

        Kommentar


        • #5
          mephisto111
          war style.display = block??? oder etwas anderes.

          Funfare
          damit verhinderst du nicht, dass es bis zur Vollendung des Scriptes angezeigt wird.


          HTML-Code:
          <!DOCTYPE html>
          <html lang="de">
          <head>
              <title>Demo API mit Vue</title>
              <meta charset="utf-8">
              <script src="https://unpkg.com/vue/dist/vue.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
              <style>
                /*↓↓↓↓↓↓↓↓↓↓ */
                  [v-cloak] { display: none; }
              </style>
          </head>
          <body>
              <div id="app">
                  <h1>Statistik</h1>
                  <table>
                      <thead>
                         <tr>
                          <th>Name</th>
                          <th>Wert</th>
                        </tr>  
                      </thead>
                      <tbody>
                          <tr>
                              <td>Fuel</td>
                              <td>{{testa}}</td>
                          </tr>
                          <tr>
                              <td>Fuel</td>
                              <!--↓↓↓↓↓↓↓ -->
                              <td v-cloak>{{testb}}</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
              <script>
              window.setTimeout(function(){
                new Vue({
                  el: '#app',
                  data: {
                    testa: "Hallo Test A",
                    testb: "Hallo Test B"
                  }});
              },3000)
              </script>
          </body>
          </html>

          Kommentar


          • #6
            Eigentlich müssten Suchformular und Darstellung der Resultate über Vue gesteuert werden. Dann könnte man die Vue-Klasse, wie bereits vorgeschlagen, auch gleich beim Laden der Seite instanziieren.

            Kommentar


            • #7
              Zitat von mephisto111 Beitrag anzeigen
              Eigentlich müssten Suchformular und Darstellung der Resultate über Vue gesteuert werden. Dann könnte man die Vue-Klasse, wie bereits vorgeschlagen, auch gleich beim Laden der Seite instanziieren.
              Eigentlich und müssten........ -würg-

              Es soll gefüllt werden, wenn der Button gedrückt wurde. Da nutzt die "Instanziierung" beim Laden der Seite nichts, weil im Eingabefeld nichts steht.

              Kommentar

              Lädt...
              X