berechnete Funktion in vuejs Dosis nicht mit mir arbeiten

Question

Ich bin neu mit vue.js und habe ein Problem, Ich habe eine berechnete Funktion, die ein Word umgekehrt, Ich machte diese Funktion arbeiten auf einen Knopf klicken, aber es funktioniert beim Laden der Seite, was ist das Problem. dies ist der vue.js Code,

new Vue({ 
el: '#computed', 
data: { 
    word: 'welcome', 
}, 
computed: { 
    alertRev: function() { 
     // get the word reversed 
     alert (this.word.split('').reverse().join('')); 
    }, 
}}); 

Und das ist HTML-Code:

<div id="computed"> 
    <button @click="alertRev">reverse the word</button> 
</div> 

Und das ist jsFiddle Link Link to code

Answer 1

Wie @BertEvans angegeben, erzielt ein Verfahren, was Sie möchte tun.

Mein Verständnis ist, dass eine berechnete Eigenschaft in der Regel ein Ergebnis von einer Funktion zurückgeben würde, im Gegensatz zu einer Aktion, wie eine Warnung. Schamlos modifiziertes Beispiel von Vuejs docs (https://vuejs.org/v2/guide/computed.html):

new Vue({ 
 
    el: '#computed', 
 
    data: { 
 
    word: 'welcome', 
 
    }, 
 
    computed: { 
 
    reversedMessage: function() { 
 
     // get the word reversed, no alert 
 
     return this.word.split('').reverse().join(''); 
 
    }, 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="computed" style="font-family: arial;"> 
 
    Type the word: <input type="text" v-model="word"> 
 
    <br /> 
 
    <br /> Reversed: {{ reversedMessage }} 
 
</div>

Verfahren Beispiel:

new Vue({ 
 
    el: '#computed', 
 
    data: { 
 
    word: 'welcome', 
 
    }, 
 
    methods: { 
 
    alertRev: function() { 
 
     // get the word reversed 
 
     alert(this.word.split('').reverse().join('')); 
 
    }, 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="computed"> 
 
    Word: {{ word }} 
 
    <br /> 
 
    <br /> 
 
    <button @click="alertRev">Reverse the word (alert)</button> 
 
</div>

Als Nebenwirkung werden berechnet Eigenschaften nicht sehr praktisch mit asynchronem Operationen.

Hoffe, das hebt nicht hervor, dass Sie schreiben könnten, was ich über Vuejs auf der Rückseite einer Briefmarke mit einem nassen Mopp weiß.