キーを押したときに計算値を再計算する方法は？

Question

私はキーを押すとリストから別のランダムな単語を表示したいと思います。

は一部「ランダム単語を表示することは、」正常に動作します：

var vm = new Vue({ 
 
    el: "#root", 
 
    data: { 
 
    verbs: ['parier', 'coûter', 'couper', 'blesser'] 
 
    }, 
 
    computed: { 
 
    verb: function() { 
 
     return this.verbs[Math.floor(Math.random() * this.verbs.length)]; 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
<div id="root"> 
 
    {{verb}} 
 
</div>

私は今verbの再計算にキー入力をバインドしたいと思います。 どうすればいいですか？私は（例えばv-on:keydown="alert()"）にJavaScriptを追加することができますが、（私はv-on:keydown="eval(verb)"を試みたが、それはうまくいきませんでした）値の再計算をトリガーする方法がわからない -

event handling上のドキュメントは、このためv-on:keydownを使用することを提案しています。

Answer 1

設計によって計算された値は理想的には1回実行されます。

One solution Vueの作成者Evanが言及したのは、コンポーネント作成時にグローバルリスナーをアタッチし、メソッドを直接呼び出すことでした。

var vm = new Vue({ 
 
    el: "#root", 
 
    data: { 
 
    verb: '', 
 
    verbs: ['parier', 'coûter', 'couper', 'blesser'] 
 
    }, 
 
    methods: { 
 
    getRandomVerb: function() { 
 
     this.verb = this.verbs[Math.floor(Math.random() * this.verbs.length)]; 
 
    } 
 
    }, 
 
    mounted() { 
 
     window.addEventListener('keydown', this.getRandomVerb) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
<div id="root"> 
 
    {{verb}} 
 
</div>

は、正しく応答コードスニペットを実行し、その後、スニペットのウィンドウでクリックして入力を開始するためにデモを取得します。ランダムな動詞が表示されます。