Question

我有一些小零件。一个用于显示值，另一个用于绑定到相同值的输入字段。

我的问题是两个输入字段均未显示。其中之一似乎会自动删除。如果我从HTML中删除其中一个，则将显示另一个。如何有多个输入字段？

我的HTML看起来像这样：

<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>

我的组件如下：

 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)" />`
   });

我的应用程序如下所示：

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

您需要关闭DOM模板中的组件：

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

（source）

Vue.js仅显示1个输入字段？

1 个答案: