web-dev-qa-db-fra.com

Utiliser la fonction de flèche dans vue calculée ne fonctionne pas

J'apprends Vue et rencontre un problème en utilisant la fonction de flèche dans la propriété calculée.

Mon code original fonctionne bien (voir l'extrait ci-dessous).

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
        switchRed: function () {
        return {red: this.turnRed}
    },
    switchGreen: function () {
        return {green: this.turnGreen}
    },
    switchBlue: function () {
        return {blue: this.turnBlue}
    }
  }
});
.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
  <div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"></div>
  <div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"></div>
</div>

Cependant, après avoir changé de méthode dans la propriété calculée, la couleur ne changera pas (même si la valeur turnRed bascule toujours entre true et false avec succès).

Ceci est mon code:

computed:{
    switchRed: () => {
        return {red: this.turnRed}
    },
    switchGreen: () => {
        return {green: this.turnGreen}
    },
    switchBlue: () => {
        return {blue: this.turnBlue}
    }
}

Est-ce que j'utilise une mauvaise syntaxe?

javascriptvue.jsvuejs2
29
PJCHENder

Vous faites face à cette erreur car une fonction de flèche ne lierait pas this à l'instance vue pour laquelle vous définissez la propriété calculée. Il en serait de même si vous définissiez methods en utilisant une fonction de flèche.

N'utilisez pas les fonctions de flèche sur une propriété d'instance ou un rappel (par exemple, vm.$watch('a', newVal => this.myMethod())). Comme les fonctions de flèche sont liées au contexte parent, ce ne sera pas l'instance Vue je m'attendais et this.myMethod sera indéfini.

Vous pouvez lire à ce sujet ici .

51
Amresh Venugopal

La fonction flèche a perdu le contexte du composant VueJS. Pour vos fonctions dans methods, computed, watch, ... utilisez les fonctions Object:

computed:{
    switchRed() {
        return {red: this.turnRed}
    },
    switchGreen() {
        return {green: this.turnGreen}
    },
    switchBlue() {
        return {blue: this.turnBlue}
    }
}
30
throrin19

Lors de la création calculée, vous n'utilisez pas =>, Vous devez simplement utiliser switchRed () {...

Jetez un coup d'œil à l'extrait de code. Fonctionne comme il se doit.

Cela s'applique à tous les calculés, méthodes, observateurs, etc.

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed:{
        switchRed () {
        return {red: this.turnRed}
    },
    switchGreen () {
        return {green: this.turnGreen}
    },
    switchBlue () {
        return {blue: this.turnBlue}
    }
  }
});
.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="turnRed = !turnRed" :class="switchRed"></div>
  <div class="demo" @click="turnGreen = !turnGreen" :class="switchGreen"></div>
  <div class="demo" @click="turnBlue = !turnBlue" :class="switchBlue"></div>
</div>
4
M U

Et pourquoi pas quelque chose de plus simple comme ça?

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  methods:{
        toggle (color) {
        this[`turn${color}`] = !this[`turn${color}`];
    }
  }
});
.demo{
  width: 100px;
  height: 100px;
  background-color: gray;
  display: inline-block;
  margin: 10px;
}
.red{
  background-color: red;
}
.green{
  background-color: green;
}
.blue{
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="app">
  <div class="demo" @click="toggle('Red')" :class="{red:turnRed}"></div>
  <div class="demo" @click="toggle('Green')" :class="{green: turnGreen}"></div>
  <div class="demo" @click="toggle('Blue')" :class="{blue: turnBlue}"></div>
</div>
3
Soldeplata Saketos