I have a simple Vue app where I'm trying to render multiple custom ponents, here's what I'm trying:

JS

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

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

HTML

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

However the problem is that only the first ponent is rendered, see working example:

I tried registering the ponent locally instead but no luck. I'm also using Vue with a script tag in my app because I can't use a build system for this particular project, not sure if that matters.

Can anyone point me in the right direction? Thanks.

I have a simple Vue app where I'm trying to render multiple custom ponents, here's what I'm trying:

JS

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

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

HTML

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

However the problem is that only the first ponent is rendered, see working example: https://codepen.io/javiervd/pen/vYBpQMm

I tried registering the ponent locally instead but no luck. I'm also using Vue with a script tag in my app because I can't use a build system for this particular project, not sure if that matters.

Can anyone point me in the right direction? Thanks.

• javascript
• vue.js

3 Answers 3

Since you are defining the template in the DOM, you can't use self-closing tags for the custom ponents.

This should work:

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

This limitation doesn't exist in template strings or Single File Components.

You can read more about this here: https://v2.vuejs/v2/style-guide/#Self-closing-ponents-strongly-remended

You should give like this in the HTML section if you want to use the self-closing tags. But it's not remended for DOM Templates

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

I forked your codepen and can confirm this is working with the separate closing tag style, in place of using self-closing tags for the ponents.

<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

The self-closing tag versus (full?) closing tag is discussed in the vue style guide page (v2) and it is expressed that for string templates (as I suspect codepen is doing when loading your HTML content), to use the closing tag, while self-closing are fine in single-file ponents, JSX, and string templates (things which are processed during build and ponent names are better known).