vue.js component template rendering

Question

In the following code I expected everything to be rendered inline, but they are not. Why isn't the component rendered inline when it is a span?

    <div id='app'>
        <span v-for="ville in nomVilles">
           <span>{{ville}}  </span>
        </span>

       <liste-villes :villes ="nomVilles"></liste-villes>  
    </div>



    Vue.component('liste-villes',{
      template: '<span >\
                   <span v-for="ville in villes">\
                      <p>{{ville}} </p>\
                   </span>\
               </span>  ',
      props: ['villes']
    });

    var vm = new Vue ({
      el:'#app',
      data: {
        nomVilles:['Vancouver','Montreal']
      }
    })

You're rendering a paragraph tag inside each span.

Amr Noman
– Amr Noman

2018-04-30 14:23:00 +00:00
Commented Apr 30, 2018 at 14:23 — Amr Noman
– Amr Noman, Commented Apr 30, 2018 at 14:23

Sammi · Accepted Answer · 2018-04-30 14:52:24Z

2

The span element is an inline element, while the p tag is a block element.

You are trying to render a paragraph element inside a span tag, so it still takes up the entire block level, forcing the next span to not be inline.

answered Apr 30, 2018 at 14:52

Sammi

2861 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js component template rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related