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

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对此 - 我可以添加JavaScript（例如v-on:keydown="alert()"），但不知道如何触发值重新计算值（我尝试了v-on:keydown="eval(verb)"，但它不起作用）。

）。

Answer 1

按设计计算的值是理想情况下运行的。

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>

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