javascript - Vue.js - 删除带有组件或类似组件的冗长引导输入字段代码

Question

在带有 pug 模板的单个文件组件中，我有许多格式相同的输入字段，例如:

 .input-group.input-group-sm
     .input-group-addon Purchase Price
      input.form-control(v-model='purchase_price')

  .input-group.input-group-sm
    .input-group-addon Net Rental Income
    input.form-control(v-model='rental_income_net')

所有输入字段都具有在组件内使用 v-model 修改的数据属性。

我想生成相同的格式和输出，但以某种方式提取引导字段样板，并且能够编写一些简单的内容，例如:

cell(title='Purchase Price' v-model='purchase_price') 
cell(title='Net Rental Income' v-model='rental_income_net') 

以上不起作用，输入字段似乎不接受插槽。另外，我不想编写冗长的事件监听器，只需要类似于上面的整洁代码。

这可能吗？

Answer 1

我不太了解哈巴狗，所以这是普通的 HTML 格式。这是一个单元格组件示例，您可以将其转换为单个文件组件。

Vue.component("cell", {
  props:["value", "title"],
  template: `
    <div class="input-group input-group-sm">
      <div class="input-group-addon">{{title}}</div>
      <input class="form-control" v-model="internalValue">
    </div>
  `,
  computed:{
    internalValue:{
      get() {return this.value},
      set(v) {this.$emit("input", v)}
    }
  }
})