Vue.js: wie einer Methode einen Parameter übergeben?

[kybela]

Wie kann ich einer selbstgeschriebenen Methode (eines Vue-Objektes) einen Wert übergeben bzw wie spreche ich diesen an?

CodePen Beispiel:

https://codepen.io/kybela/pen/yQOwdN

In Vanilla-Javascript steht in der Console "wert: 3"

var $foobar = { hallo(x) { console.log("wert: " + x) } }
$foobar.hallo(3)

In Vue.js "wert: undefined" :

  $foo = new Vue({
    el: '#a',
		data: {wert: 1},
    methods: {
      hallo(x) {	 return "wert: " + x  }
    }
  });


$foo.hallo(3)

[Christian Kruse]

Hallo kybela,

In Vue.js "wert: undefined" :

  $foo = new Vue({
    el: '#a',
		data: {wert: 1},
    methods: {
      hallo(x) {	 return "wert: " + x  }
    }
  });


$foo.hallo(3)

Der Code funktioniert so nicht, das gibt einen Syntax-Fehler. So würde er funktionieren:

let $foo = new Vue({
  el: '#a',
  data: {wert: 1},
  methods: {
    hallo: function(x) { return "wert: " + x }
  }
});


$foo.hallo(3)

Es ist mir aber nicht wirklich klar, was du erreichen möchtest.

LG,
CK

[1unitedpower]

Der Code funktioniert so nicht, das gibt einen Syntax-Fehler. So würde er funktionieren:

Nur im strikten Modus, im nicht-strikten Modus wird so eine globale Variable $foo angelegt.

[1unitedpower]

Wie kann ich einer selbstgeschriebenen Methode (eines Vue-Objektes) einen Wert übergeben bzw wie spreche ich diesen an?

Genauso, wie du es jetzt machst.

CodePen Beispiel:

https://codepen.io/kybela/pen/yQOwdN

In Codepen zeigt das Ausgabefenster keine Konsole an, sondern die zusammengebastelte HTML/CSS/JS-Ergebnisseite. Der Text "wert: undefined" stammt aus deinem HTML-Eingabefenster <p>{{ hallo() }} </p>, dort rufst du hallo ohne Parameter auf.

  $foo = new Vue({
    el: '#a',
		data: {wert: 1},
    methods: {
      hallo(x) {	 return "wert: " + x  }
    }
  });


$foo.hallo(3)

Das Ergebnis dieses Aufrufs wird nirgendwo geloggt, es wird direkt vergessen, deswegen kannst du es nicht beobachten, aber $foo.hallo(3) gibt wirklich "wert: 3" zurück,

[Christian Kruse]

Hallo 1unitedpower,

Interessant. Ich hatte es extra überprüft und einen Syntax-Fehler bekommen, dein Fiddle geht aber bei mir auch. Welche Syntax Extension ist das denn?

LG,
CK

[1unitedpower]

Interessant. Ich hatte es extra überprüft und einen Syntax-Fehler bekommen, dein Fiddle geht aber bei mir auch. Welche Syntax Extension ist das denn?

Ach, jetzt seh ich erst was du meinst. Ich dachte zuerst, du bemängelst nur das fehlende let. Du meinst hello(x) {....}, das ist EcmaScripts recht junge Syntax für Objektmethoden und ist syntaktischer Zucker für hello: function (x) { ... }.

[Christian Kruse]

Hallo 1unitedpower,

Interessant. Ich hatte es extra überprüft und einen Syntax-Fehler bekommen, dein Fiddle geht aber bei mir auch. Welche Syntax Extension ist das denn?

Ach, jetzt seh ich erst was du meinst. Ich dachte zuerst, du bemängelst nur das fehlende let. Du meinst hello(x) {....}, das ist EcmaScripts recht junge Syntax für Objektmethoden und ist syntaktischer Zucker für hello: function (x) { ... }.

Danke.

Das hatte ich auch gedacht, dass es die shorthand syntax ist. Aber ich hatte das beim nachstellen als Fehler angekreidet bekommen und dann als „ok, haste dich geirrt, ist wohl kaputt“ abgehakt. Da habe ich wohl etwas anderes falsch gemacht 😀

LG,
CK

[kybela]

Diese Vue-Aufruf-Variante funktioniert:

<div id="a">
  <p v-model>wert: {{hallo(3) }} </p>
</div>
<script>
  $foo = new Vue({
    el: '#a',
		data: {wert: 2},
    methods: {
      hallo(x) {	 return x  }
    }
  });

</script>

Da findet der Aufruf der Methode hallo() im Template statt. Das klappt, Output: "wert: 3"

Im Template klappt die Übergabe auch mit einer Variable:

<div id="a">
  <p v-model>wert: {{hallo(wert) }} </p>
</div>
<script>
  $foo = new Vue({
    el: '#a',
		data: {wert: 3},
    methods: {
      hallo(x) {	 return x  }
    }
  });

</script>

Output: "wert: 3"

Und das möchte ich auch außerhalb vom Template steuern. Indirekt krieg ich das hin mit $foo.wert=9

<div id="a">
  <p v-model>wert: {{hallo(wert) }} </p>
</div>
<script>
  $foo = new Vue({
    el: '#a',
		data: {wert: 3},
    methods: {
      hallo(x) {	 return x  }
    }
  });


$foo.wert=9;

</script>

Output: "wert: 9"

[kybela]

Siehe meine Beispiele oben: Kann ich die Ausgabe auch anders steuern, als mit $foo.wert=9 ?

[1unitedpower]

Siehe meine Beispiele oben: Kann ich die Ausgabe auch anders steuern, als mit $foo.wert=9 ?

Ja, sowie du es ganz am Anfang hattest, du hast nur an der falschen Stelle die Ausgabe gesucht. Ich habe dein Beispiel nun so geändert, dass die Ausgabe dir direkt ins Gesicht springt: https://codepen.io/anon/pen/JeNyLP

[kybela]

Sorry, dass ich mich im Eingangpost missverständlich ausgedrückt habe.

In deinem Beispiel übergibt das Template den Wert 3. Damit ist der Wert fixiert.

In diesem Beispiel übergebe ich statt dem Literal 3 die Variable wert:

https://codepen.io/kybela/pen/YRVrzZ

und mit

$foo.wert=9;

ändere ich nachträglich den Wert.

Meine Frage: geht das auch anders?