如何在按键时重新评估计算值？

Question

我想在按下某个键时显示列表中不同的随机词。

"displaying a random word" 部分工作正常：

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 的创建者 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>

要使演示正确响应，运行代码段，然后单击代码段 window 并开始键入。将显示随机动词。

如何在按键时重新评估计算值？

How to reassess a computed value upon key press?

javascript

event-handling

keyboard-events

vue.js