VuejsAsk

Wiki-Quelltext dieser Seite.

<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <p>Stell mir eine Frage, die ich bin Ja oder Nein beantworten soll: <br>
  <input style="width:90%" v-model="frage"/></p>
  <img v-bind:src="antwortBild">
</div>

<script>
var app = new Vue(
  {
    "el" : '#app',
    "data" : {
      "frage" : "",
      "antwortBild" : ""
    },
    "watch": {
      // immer wenn sich "frage" ändert, wird diese Funktion aufgerufen
      "frage" : function(neueFrage){
         // wenn die Frage ein "?" besitzt, fragen wir yesno.wtf nach einer Antwort
         if(neueFrage.indexOf("?") > -1){
           // ajax Befehl von JQuery, um Daten aus dem Internet zu holen
           $.ajax({ dataType: "json", url : "https://yesno.wtf/api", success: function(daten){
             app.antwortBild = daten.image;
           }});
         }
      }
    }
  }
);

</script>
</html>