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

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>

我现在想将按键绑定(bind)到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>

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