Как переоценить вычисленное значение при нажатии клавиши?

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. Как мне это сделать?

Документация по event handling предлагает использовать v-on:keydown для этого - я могу добавить JavaScript (v-on:keydown="alert()", например), но не знаю, как вызвать перерасчета значения (я пытался v-on:keydown="eval(verb)", но он не работает).

Answer 1

Расчетные значения по дизайну идеально выполняются один раз.

One solution, упомянутый создателем Vue, Эваном, должен был подключить глобальный слушатель к созданию компонента, а затем вызвать ваш метод напрямую.

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>

Чтобы получить демо правильно ответить, выполнить фрагмент кода, а затем щелкните в окне сниппета и начать печатать. Будут показаны случайные глаголы.