Vue - Snippets - Versionsgeschichte

37.49.72.8: /* Utilities / nützliche Funktionen */

2021-01-09T01:00:50Z

Utilities / nützliche Funktionen

2021-01-07T16:00:42Z

Send Receive REST Data

2021-01-07T15:57:15Z

Send Receive REST Data

2021-01-06T23:06:39Z

Send Receive REST Data

2021-01-06T23:06:19Z

Slots

2021-01-06T09:02:49Z

Arrays

2021-01-06T07:39:37Z

Utilities / nützliche Funktionen

2021-01-06T06:21:16Z

Utilities / nützliche Funktionen

2021-01-06T06:20:55Z

Arrays

2021-01-06T06:20:11Z

Utilities / nützliche Funktionen

← Nächstältere Version		Version vom 9. Januar 2021, 01:00 Uhr
Zeile 311:		Zeile 311:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	===== Sonstiges =====
		+	''Underscore Argumente'' - nutze diese wenn du Argumente, die automatisch bereitgestellt werden nicht benötigst. Dann meckert der Compiler nicht:
		+	scrollBehavior(to, from, savedPosition){// compiler tells you that you don't use them}
		+	scrollBehavior(_, _2, savedPosition){
		+	console.log(savedPosition) // compiler does not complain :-)
		+	}

@@ Zeile 181: / Zeile 181: @@
 === Send Receive REST Data ===
+Das folgende Beispiel bezieht und sendet JSON Daten von / zu einer Firebase Datenbank. Das Prinzip läßt sich auf alle REST Schnittstellen adaptieren.
 <syntaxhighlight lang="javascript">
 loadExperiences() {

@@ Zeile 183: / Zeile 183: @@
 <syntaxhighlight lang="javascript">
- loadExperiences() {
+loadExperiences() {
        fetch('https://vue-course-http-01-default-rtdb.firebaseio.com/surveys.json')
          .then( (response) => {
@@ Zeile 195: / Zeile 197: @@
            // hint if we would use function(data) instead of arrow function
            // the keyword this would not work
            console.log(data);
            const results = [];
@@ Zeile 201: / Zeile 205: @@
+           }
            this.results = results;
-         });
+         })
-     },
+        .catch(
 </syntaxhighlight>
@@ Zeile 217: / Zeile 230: @@
        //   rating: this.chosenRating,
        // });
+      this.error = null;
        fetch('https://vue-course-http-01-default-rtdb.firebaseio.com/surveys.json', {
          method: 'POST',
@@ Zeile 226: / Zeile 239: @@
            name: this.enteredName,
            rating: this.chosenRating
-         })
+         }),
        });

@@ Zeile 205: / Zeile 205: @@
 </syntaxhighlight>
-<syntaxhighlight lang="html5">
+<syntaxhighlight lang="javascript">
 submitSurvey() {
        if (this.enteredName === '' || !this.chosenRating) {

@@ Zeile 180: / Zeile 180: @@
 </syntaxhighlight>
-<syntaxhighlight lang="html5">
+=== Send Receive REST Data ===
 </syntaxhighlight>
 <syntaxhighlight lang="html5">
 </syntaxhighlight>

@@ Zeile 196: / Zeile 196: @@
   [{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]
 <syntaxhighlight lang="javascript">
 // add to end of array
 this.friends.push(newFriend)
 // add to start of array
 this.friends.unshift(newFriend)
 // delete item from array via id
 deleteItem(id){
    this.items = this.items.filter( item => item.id !== sarchId)
@@ Zeile 206: / Zeile 209: @@
    // If filterFunction returns true the item is kept. item.id !== id returns true for every
    // item which has NOT the id
+}
 </syntaxhighlight>

@@ Zeile 208: / Zeile 208: @@
+}
 </syntaxhighlight>
 ===== Finden und Suchen =====
 <syntaxhighlight lang="javascript">
@@ Zeile 218: / Zeile 219: @@
 // identifiedItem is a proxy connected to the original items array.
 // thus why we can modify identifiedItems and items will be altered too
 </syntaxhighlight>

@@ Zeile 191: / Zeile 191: @@
 Siehe [[JavaScript - Snippets]]
-== Arrays ==
+==== Arrays ====
-=== Elemente hinzufügen / entfernen ===
+===== Elemente hinzufügen / entfernen =====
 Gegeben ist ein Array items in der Art
   [{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]
@@ Zeile 208: / Zeile 208: @@
+}
 </syntaxhighlight>
-=== Finden und Suchen ===
+===== Finden und Suchen =====
 <syntaxhighlight lang="javascript">
 // find in array and change prop

← Nächstältere Version		Version vom 6. Januar 2021, 06:20 Uhr
Zeile 190:		Zeile 190:

	Siehe [[JavaScript - Snippets]]		Siehe [[JavaScript - Snippets]]
		+
		+	== Arrays ==
		+	=== Elemente hinzufügen / entfernen ===
		+	Gegeben ist ein Array items in der Art
		+	[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]
		+	<syntaxhighlight lang="javascript">
		+	// add to end of array
		+	this.friends.push(newFriend)
		+	// add to start of array
		+	this.friends.unshift(newFriend)
		+	// delete item from array via id
		+	deleteItem(id){
		+	this.items = this.items.filter( item => item.id !== sarchId)
		+	// filter( filterFunction ) uses filterFunction for every item in items.
		+	// If filterFunction returns true the item is kept. item.id !== id returns true for every
		+	// item which has NOT the id
		+	}
		+	</syntaxhighlight>
		+	=== Finden und Suchen ===
		+	<syntaxhighlight lang="javascript">
		+	// find in array and change prop
		+	const identifiedItem = this.items.find(
		+	(item) => item.id === searchId // the same as function(friend){return friend.id...}
		+	)
		+	// filter(callback) - callback is executed on every array (array item) first item match is returned
		+	identifiedItem.isFavourite = !identifiedItem.isFavourite
		+	// identifiedItem is a proxy connected to the original items array.
		+	// thus why we can modify identifiedItems and items will be altered too
		+	</syntaxhighlight>
		+
		+
		+	</syntaxhighlight>