Utilisez la flèche de la fonction en vue calculées ne fonctionne pas

Je suis à l'apprentissage de Vue et face à un problème lors de l'utilisation de la flèche en fonction calculée de la propriété.

Mon code d'origine fonctionne très bien (Voir extrait ci-dessous).

JS:

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}
    }
  }
});

CSS:

.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;
}

HTML:

<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 que j'ai changer de méthodes dans la propriété calculée, la couleur ne changera pas (bien que le turnRed valeur encore basculer entre le vrai et le faux avec succès).

C'est mon code:

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

Dois-je utiliser la mauvaise syntaxe ?

jetez un oeil à ma réponse. J'ai notamment travaillé à la ciselée.
la flèche de la fonction à modifier la portée de cette à son parent

InformationsquelleAutor PJCHENder | 2017-03-23

50

Vous êtes confronté à cette erreur, car une flèche fonction ne serait pas lier this à la vue de l'instance pour laquelle vous définissez la propriété calculée. Le même qui se passerait si vous deviez définir methods à l'aide d'une flèche fonction.

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

Vous pouvez lire à ce sujet ici.
- Bien que vous pouvez utiliser la flèche fonctions lorsque vous n'avez pas besoin d'accéder à la this objet: calculée: { switchRed: () => ({rouge: "rouge"}), ... }
InformationsquelleAutor Amresh Venugopal
28

La flèche funtion perdu la VueJS composant contexte. Pour vos fonctions dans methods, computed, watch, ... utiliser les fonctions de l'Objet :
```
computed:{
    switchRed() {
        return {red: this.turnRed}
    },
    switchGreen() {
        return {green: this.turnGreen}
    },
    switchBlue() {
        return {blue: this.turnBlue}
    }
}
```
- La seule chose que je peux ajouter c'est que si vous avez des fonctions à l'intérieur de ces fonctions, par exemple un rappel, puis à l'aide de la flèche fonction de rendre votre code plus propre, car il utilise cet objet à partir de l'affichage de contexte, qui est vue instance de maintenant.
- C'est le plus utile de répondre comme il explique comment résoudre le problème. Je recommande cette réponse et de la accepté de répondre que le "tout idéal" réponse.
- Une étrange chose que j'ai remarqué c'est que lorsque vous définissez une propriété calculée avec une flèche fonction et ensuite vous déboguer avec chrome devtools il apparaît encore comme si 'ce' fait référence à la VueJS composant contexte. Il m'a pris une éternité pour comprendre que la flèche fonctions ont été la cause de mes problèmes parce que quand je mets un 'debugger' instruction à l'intérieur de ma flèche fonction et ensuite inspecté " il " toutes les données du composant était apparaître, mais quand j'ai essayé de la console.log() mes données de composants, il a été défini.
InformationsquelleAutor throrin19

Lors de la création d'calculé que vous n'utilisez pas => , vous devriez utiliser switchRed () {...

Prendre un coup d'oeil à l'extrait de code. Fonctionne comme il se doit.

Elle s'applique à toutes calculé,méthode, les observateurs etc.

JS:

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}
    }
  }
});

CSS:

.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;
}

HTML:

<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>

InformationsquelleAutor M U

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

JS:

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  methods:{
  	toggle (color) {
    	this[`turn${color}`] = !this[`turn${color}`];
    }
  }
});

CSS:

.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;
}

HTML:

<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>

InformationsquelleAutor Soldeplata Saketos

Vous devez vous connecter pour publier un commentaire.