Hi,
hatte vor drei Jahren hier im Forum angekündigt, mich mehr mit Vue auseinander zu setzen, was ich jetzt mit etwas Verzögerung tue.
Als erstes interessiert mich das Arbeiten mit Formularen. Hier geht's rein ums Üben.
1. Daten initial ins Formular laden
2. Daten verändern und abschicken
3. Die per PHP (Ajax) veränderten Daten "zurück laden"
Es geht eigentlich nur darum wie ich die Daten des Objekts "data" abschicke und wie ich dem Objekt Werte zuweise.
Dazu habe ich folgendes Testskript geschrieben. Für den Ajax-Part nutze ich jQuery, da Vue hier wohl nichts eigenes hat.
Das PHP-Skript nimmt die Werte, verändert sie etwas und gibt die veränderten Werte als JSON aus.
Hier der HTML Part
Frage: Das funktioniert zwar alles so wie es soll, aber ist es auch vernünftig, das so zu machen?
Ich habe speziell hierfür kein gutes Tutorial gefunden.
Hier noch das PHP - Skript, falls das jemanden interessiert:
hatte vor drei Jahren hier im Forum angekündigt, mich mehr mit Vue auseinander zu setzen, was ich jetzt mit etwas Verzögerung tue.
Als erstes interessiert mich das Arbeiten mit Formularen. Hier geht's rein ums Üben.
1. Daten initial ins Formular laden
2. Daten verändern und abschicken
3. Die per PHP (Ajax) veränderten Daten "zurück laden"
Es geht eigentlich nur darum wie ich die Daten des Objekts "data" abschicke und wie ich dem Objekt Werte zuweise.
Dazu habe ich folgendes Testskript geschrieben. Für den Ajax-Part nutze ich jQuery, da Vue hier wohl nichts eigenes hat.
Das PHP-Skript nimmt die Werte, verändert sie etwas und gibt die veränderten Werte als JSON aus.
Code:
const app = new Vue({ el:'#app', data: { name: '', age: 0, gender:'female' }, methods: { sendData: function () { var that = this; var toSendSerialised = $.param(this.$data); $.getJSON('vue-test-2.php',toSendSerialised) .done(function (data) { $.each(data, function (key, value) { that.$data[key] = value; }); }); } } });
Code:
<div id="app"> <input type="text" v-model="name"> <input type="text" v-model="age"> <select v-model="gender"> <option value="male">male</option> <option value="female">female</option> </select> <button @click="sendData">Process Data</button> </div>
Ich habe speziell hierfür kein gutes Tutorial gefunden.
Hier noch das PHP - Skript, falls das jemanden interessiert:
PHP-Code:
if (isset($_GET) && count($_GET) > 0) {
$back['name'] = $_GET['name'].rand(1,9);
$back['age'] = $_GET['age'] + 1;
$back['gender'] = $_GET['gender'] === 'female' ? 'male' : 'female';
}
$json = json_encode($back);
header('Content-Type: application/json');
echo $json;
Kommentar