Bugs redirection composant avec props


#1

Salut !

Bien content de trouver un forum français, j’ai besoin de votre aide
Dans un composant, je fais une redirection vers un autre en cliquant sur un bouton :

this.$router.push({path: '/badges/search', query: {filter: item.tag_id}})

Ensuite, au niveau des routes, j’ai ça :

{ path: '/badges',
name: 'Badges',
component: require('./components/pages/Badges.vue'),
beforeEnter: requireAuth,
children: [{
  path: 'search',
  name: 'Badge-id',
  components: require('./components/pages/Badges.vue'),
  props: (route) => ({filter: route.query.filter})
}]

},

Et j’ai cette erreur quand je clique sur le lien :

vue-router.esm.js:1697 TypeError: Cannot read property '_c' of undefined
at render (http://localhost:8080/app.js:27823:91)
at http://localhost:8080/app.js:30450:17
at http://localhost:8080/app.js:30477:66
at Array.map (native)
at http://localhost:8080/app.js:30477:38
at Array.map (native)
at flatMapComponents (http://localhost:8080/app.js:30476:26)
at http://localhost:8080/app.js:30415:5
at iterator (http://localhost:8080/app.js:30220:7)
at step (http://localhost:8080/app.js:30103:9)

Quelqu’un a une idée ? J’ai aussi remarqué qu’en essayant de récupérer “this” dans la méthode “created”, il n’étais jamais différent de undefined (j’ai fait un while(this === undefined) pour vérifier, boucle infinie…)

Merci d’avance !


#2

Bonjour @bellissi1u.

Si this correspond à undefined dans created, il est possible que ce soit parce que tu l’utilises dans une fonction interne qui redéfini son propre this.

Un exemple avec un timeout JavaScript.

ES5:

created: function () {
  var self = this;

  this; // vm courante (contexte de Vue)
  self; // vm courante (contexte de Vue)

  setTimeout(function () {
    this; // `undefined` (contexte de setTimeout)
    self; // vm courante (contexte de Vue)
  }, 5000);
}

ES6:

created: function () {
  this; // vm courante (contexte de Vue)

  setTimeout(() => { // les fonctions fléchés ne redéfinissent pas le contexte
    this; // vm courante (contexte de Vue)
  }, 5000);
}

Autres points de contrôle :

Le require que tu utilises ? Il provient de quoi ? Il provient de webpack ? Si oui, as-tu bien webpack et le loader vue-loader ?

Assure toi que le router est correctement défini « avant » de faire appel à this.$router.push({path: '/badges/search', query: {filter: item.tag_id}}) (ce qui doit être le cas si tu utilises un event pour le lancer).

Tiens nous au courant :wink:


#3

Bonjour et merci pour ta réponse !

Mais j’ai trouvé le problème hier soir, après avoir galéré pendant 2jours :

children: [{
  path: 'search',
  name: 'Badge-id',
  component**s**: require('./components/pages/Badges.vue'),
  props: (route) => ({filter: route.query.filter})
}]

J’ai mis un ‘s’ à component, ce qui cause le problème (aucune idée de pourquoi, aucune idée de pourquoi l’erreur est aussi vague)
Donc à l’avenir si quelqu’un a le problème, vérifiez que vous avez pas rajouté ce ‘s’ !


#4

Bien joué.

Il me semble que les syntaxes suivantes sont également valide.

ES5

/* ... */
components: { MyCompo: require('./components/pages/Badges.vue') }
/* ... */
var MyCompo = require('./components/pages/Badges.vue');
/* ... */
components: { MyCompo: MyCompo }
/* ... */

ES6

import MyCompo from './components/pages/Badges.vue'
/* ... */
components: { MyCompo }
/* ... */