Verwendung von Methoden innerhalb von Berechneten Eigenschaften in vueJs

Ich versuche, rufen eine Methode in der eine berechnete Eigenschaft. Mein code ist komplizierter, aber das aufrufen der Methode scheint nicht zu funktionieren sogar in diesem einfachen Beispiel:

JS:

new Vue({
  el: '#vue-instance',
  data: {
    x: 1
  },
  methods: {
    augmented: function(variable) {
      return (2 * variable);
    },
  },
  computed: {
    doubleX: function() {
      return augmented(this.x);
    }
  }
});

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="vue-instance">
  <input type="number" v-model="x"> result: {{ doubleX }}
</div>

Wie man sehen kann, läuft das snippet, den Wert von doubleX ist nicht immer gerendert.

InformationsquelleAutor Yassin Kisrawi | 2017-06-14
  1. 19

    Müssen Sie die Referenz der Komponente Methoden über this:

    JS:

    var vm = new Vue({
  el: '#vue-instance',
  data: {
    x: 1
  },
  methods: {
    augmented: function(variable) {
      return (2 * variable);
    },
  },
  computed: {
    doubleX: function() {
      return this.augmented(this.x);
    }
  }
});

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="vue-instance">
  <input type="number" v-model="x"> result: {{ doubleX }}
</div>

    • Großen Dank für Sie, sir 🙂 habe Noch eine Frage, ist es möglich, eine Funktion aufzurufen, die direkt in die html ? Bedeutung kann ich etwas tun, wie Ergebnis: {{ augmented(2) }}
    • Yep gerade wie das {{ augmented(2) }}
    • was ist, wenn die Methode der augmented() ist in berechnet:????
    • Wenn Sie sagen, dass Sie eine berechnete Eigenschaft, die man als augmented und Referenz der Wert der Eigenschaft, die in Ihrer Vorlage, dann würden Sie nur schreiben {{ augmented }}
    • ich sage, dass, wenn doubleX-und augmented-beide sind in berechneten dann, wie augmented-Eigenschaft Anruf von doubleX.
    • Innerhalb einer berechneten, können Sie auf andere berechnet wie normale Eigenschaften (D. H. this.augmented oder this.doubleX). Siehe die Dokumentation: vuejs.org/v2/guide/computed.html

    InformationsquelleAutor thanksd
Schreibe einen Kommentar