Vue.js Vue2:v-model不支持动态输入类型

尝试创建动态输入元素时，我会遇到如下模板编译错误：

v-model不支持动态输入类型。使用v-if分支 相反

HTML

JS

Vue.component（'sr-el'{
模板：`
下面是绑定的{name}输入值：{{inputVal}
`,
道具：['type'，'name'，'persons']，
数据（）{
返回{
inputVal:this.persons，
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
人：1，
个人：2，
}
}
})

截至，Vue支持动态输入类型，因此您现在可以将

类型

绑定到所需的数据属性：

<input :type="type" :name="name" :id="name" v-model="inputVal">

---

嗯，不是真的性感不，不是。更大的问题是：为什么您想要一个基本上只是模仿

输入

标记功能的组件？我希望能够管理不同表单元素的存在、验证和配置。因为所有这些都可能根据输入类型而有所不同，所以我会为每种类型创建单独的组件（

sr text el

，

sr number el

等），而不是制作一个组件来完成这一切，好的。我们将做更多的研究。

Vue.component('sr-el', {
  template: `
    <span>
      <input :type="type" :name="name" :id="name" v-model="inputVal" :class="{invalid: !persons}">
      Here's the bound {{ name }} input value: {{ inputVal }}
    </span>
  `,
  props: ['type', 'name', 'persons'],
  data() {
    return {
      inputVal: this.persons,
    }
  }
})

new Vue({
    el: '#app',
  data() {
    return {
      personsFoo: 1,
      personsBar: 2,
    }
  }
})

<input :type="type" :name="name" :id="name" v-model="inputVal">

<input v-if="type == 'text'" type="text" :name="name" :id="name" v-model="inputVal">
<input v-if="type == 'number'" type="number" :name="name" :id="name" v-model="inputVal">