WoJ WoJ - 18 days ago 6
Javascript Question

How to reassess a computed value upon key press?

I would like to display a different random word from a list upon pressing a key.

The "displaying a random word" part works fine:



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>





I now would like to bind a keypress to the re-computation of
verb
. How should I do that?

The documentation on event handling suggests using
v-on:keydown
for this - I can add JavaScript (
v-on:keydown="alert()"
for instance) but do not know how to trigger a recalculation of a value (I tried
v-on:keydown="eval(verb)"
but it did not work).

Answer

Computed values by design are ideally run once.

One solution mentioned by Vue's creator, Evan, was to attach a global listener on component creation, and then call your method directly.

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>

To get the demo to respond correctly, Run the code snippet, then click in the snippet window and begin typing. Random verbs will be displayed.