1
votes

Vue ne rend que le premier problème de composant personnalisé

J'ai une application Vue simple où j'essaye de rendre plusieurs composants personnalisés, voici ce que j'essaye:

<div id="app">
  <refinement-list attribute="test" title="Test" />
  <refinement-list attribute="sample" title="Sample" />
</div>

HTML p >

Vue.component('refinement-list', {
  props: ['attribute', 'title'],
  template: '<div>{{attribute}} - {{title}}</div>'
});

new Vue({
  el: '#app'
});

Cependant, le problème est que seul le premier composant est rendu, voir l'exemple de travail: https://codepen.io/javiervd/pen/vYBpQMm

J'ai essayé d'enregistrer le composant localement à la place, mais pas de chance. J'utilise également Vue avec une balise de script dans mon application car je ne peux pas utiliser de système de construction pour ce projet particulier, je ne sais pas si cela compte.

Est-ce que quelqu'un peut m'indiquer dans la bonne direction? Merci.

javascript vue.js

0 commentaires

3 Réponses :

2
votes

Vous devriez donner comme ça dans la section HTML si vous voulez utiliser les balises à fermeture automatique. Mais ce n'est pas recommandé pour les modèles DOM

<div id="app">
  <div>
  <refinement-list attribute="test" title="Test1" />
  </div>
  <div>
  <refinement-list attribute="test" title="Test2" />
  </div>
</div>

0 commentaires

4
votes

Puisque vous définissez le modèle dans le DOM, vous ne pouvez pas utiliser de balises à fermeture automatique pour les composants personnalisés.

Cela devrait fonctionner:

<div id="app">
  <refinement-list attribute="test" title="Test"></refinement-list>
  <refinement-list attribute="sample" title="Sample"></refinement-list>
</div>

Ceci la limitation n'existe pas dans les chaînes de modèle ou les composants de fichier unique.

Vous pouvez en savoir plus à ce sujet ici: https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended

p >

1 commentaires

Merci, cela a résolu le problème!

2
votes

J'ai bifurqué votre codepen et je peux confirmer que cela fonctionne avec le style de balise de fermeture séparée, au lieu d'utiliser des balises à fermeture automatique pour les composants.

<div id="app">
  <refinement-list attribute="test" title="Test"></refinement-list>
  <refinement-list attribute="sample" title="Sample"></refinement-list>
</div>

ref: https://codepen.io/edm00se/pen/pozpqym?editors=1010

La balise à fermeture automatique versus la balise de fermeture (complète?) est discuté dans la page du guide de style vue (v2) et il est indiqué que pour les modèles de chaîne (comme je suppose que codepen le fait lors du chargement de votre contenu HTML), utiliser la balise de fermeture, tandis que la fermeture automatique est très bien dans les composants à fichier unique, JSX et les modèles de chaîne (les choses qui sont traitées lors de la construction et les noms des composants sont mieux connues).

0 commentaires