button to create pizzas
parent
0f1eeabc7c
commit
fa0a9672d3
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
Loading…
Reference in New Issue