button to create pizzas

missytake
missytake 2020-06-20 15:36:35 +02:00
parent 0f1eeabc7c
commit fa0a9672d3
2 changed files with 29 additions and 25 deletions

View File

@ -6,31 +6,14 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
{{ message }} <p>Du willst eine Pizza? Hier kannst du mit belegen anfangen:</p>
</div> <input v-model="pizzatitle" :placeholder="pizzatitle">
<div id="app-2"> <button v-on:click="createPizza">Starte mit Belegen!</button>
<span v-bind:title="message"> <p>Existierende Pizzen:</p>
Hover your mouse over me for a few seconds <ul>
to see my dynamically bound title!
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
<script>
var app2 = new Vue({
el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
})
</script>
</ul>
</div>
<script src="/js/index.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,21 @@
var app = new Vue({
el: '#app',
data: {
pizzatitle: "Meine Pizza"
},
methods: {
createPizza: function () {
console.log("Creating Pizza...");
var myJson = {
"name": this.pizzatitle
};
fetch("/api/pizzas/", {
method: 'POST',
body: JSON.stringify(myJson),
headers: {
'Content-Type': 'application/json'
}
});
}
}
});