web-dev-qa-db-fra.com

Debounce propriétés calculées/getters dans Vue

Je n'arrive pas à analyser les propriétés calculées ni les getters de vuex. Les fonctions rejetées retournent toujours indéfinies.

https://jsfiddle.net/guanzo/yqk0jp1j/2/

HTML:

<div id="app">
  <input v-model="text">
  <div>computed: {{ textComputed }} </div>
  <div>debounced: {{ textDebounced }} </div>
</div>

JS:

new Vue({
    el:'#app',
  data:{
    text:''
  },
  computed:{
    textDebounced: _.debounce(function(){
      return this.text
    },500),
    textComputed(){
        return this.text
    }
  }

})
javascriptvue.jslodashvuex
7
Eric Guan

Comme je l'ai mentionné dans mon commentaire, le rebond est une opération intrinsèquement asynchrone et ne peut donc pas renvoyer de valeur. Selon vos besoins, vous voudrez peut-être vous opposer au côté input . Il n'y aura aucune différence entre la valeur dans text et celle dans textComputed, mais si vous v-model="textComputed", le paramètre de valeur sera rejeté.

Si vous voulez spécifiquement une version de variable d'une variable, mrogers a donné une bonne solution.

var x = new Vue({
  el: '#app',
  data: {
    text: 'start'
  },
  computed: {
    textComputed: {
      get() {
        return this.text;
      },
      set: _.debounce(function(newValue) {
        this.text = newValue;
      }, 500)
    }
  }
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="app">
  <div>
    Debounced input:
    <input v-model="textComputed">
  </div>
  <div>
    Immediate input:
    <input v-model="text">
  </div>
  <div>computed: {{ textComputed }} </div>
  <div>debounced: {{ text }} </div>
</div>

14
Roy J

Je ne comprends pas pourquoi la fonction anti-rebond ne fonctionne pas sur une propriété calculée. Cependant, une solution alternative consiste à placer l'anti-rebond sur une fonction de la section methods et à l'appeler via un watch.

https://jsfiddle.net/vsc4npv3/

HTML:

<div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ debouncedText }} </div>
</div>

JavaScript:

var x = new Vue({
    el:'#app',
  data:{
    text:'',
    debouncedText: ''
  },
  watch: {
    text: function (val) {
        this.debouncer();
    }
  },
  computed:{
    textComputed(){
        return this.text;
    }
  },
  methods: {
    debouncer: _.debounce(function(){
      this.debouncedText = this.text;
    },500)
  }

})
1
mrogers