Vue.js only displays 1 input field?

Question

I have some small components. One for displaying a value and one input field that I bind to the same value.

The problem I have is that both input fields doesn't display. One of them seems to be automatically removed. If I remove either one from the HTML, the other will show. How can I have multiple input fields?

My HTML looks like this:

<div class="previewPage">
   <prislapp-pris :pris="lapp.pris"></prislapp-pris>
   <prislapp-forpris :forpris="lapp.forpris"></prislapp-forpris>
   <input-forpris :forpris="lapp.forpris" @input="handleInput2" />
   <input-pris :pris="lapp.pris" @input="handleInput" />
</div>

My components looks like this:

 Vue.component('prislapp-pris', {
      props: ['pris'],
      template: '<div class="prislappPris">[[ pris ]],-</div>',
      delimiters: ['[[',']]']
   });

   Vue.component('prislapp-forpris', {
      props: ['forpris'],
      template: '<div class="prislappForpris">[[ forpris ]],-</div>',
      delimiters: ['[[',']]']
   });

   Vue.component('input-forpris', {
      props: ['forpris'],
      template: `<input type="text" :value="forpris" @input="$emit('input', $event.target.value)" />`
   });

   Vue.component('input-pris', {
      props: ['pris'],
      template: `<input type="text" :value="pris" @input="$emit('input', $event.target.value)" />`
   });

And my App looks like this:

var app = new Vue({
    el: '.previewPage',
    data: {
        lapp: {
           id: 1,
           forpris: 30595,
           pris: 2416
        }
     }, methods: 
     {
        handleInput(value)
        {
           console.log(value);
           this.lapp.pris = value;
        },
        handleInput2(value)
        {
           console.log(value);
           this.lapp.forpris = value;
        }
     }
  });

Answer 1

You need to close your components in DOM template:

<input-forpris :forpris="lapp.forpris" @input="handleInput2"></input-forpris>
<input-pris :pris="lapp.pris" @input="handleInput"></input-pris>

(source)