はプログラムによるここ@click方法

Question

の値を変更@clickハンドラを持つ要素です。この要素内

<button @click="doSomething">doSomething</button> 

、どのように我々はプログラム的doSomethingElseでdoSomethingの値を変更できますか？

Answer 1

ハンドラとして必要な関数を変数に格納します。

この例では、handlerは、最初のボタンのクリックハンドラです。 2番目と3番目のボタンをクリックすると、handlerに設定されている機能が変更されます。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     handler: this.doSomething, 
 
    } 
 
    }, 
 
    methods: { 
 
    doSomething() { 
 
     console.log('something') 
 
    }, 
 
    doSomethingElse() { 
 
     console.log('something else') 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <button @click="handler">Fire Click Handler</button> 
 
    <button @click="handler = doSomething">Make Handler Do Something</button> 
 
    <button @click="handler = doSomethingElse">Make Handler Do Something Else</button> 
 
</div>