Vue2：v-model 不支持动态输入类型

Question

尝试创建动态输入元素时，出现如下模板编译错误：

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

https://jsfiddle.net/u8ncfdvn/

HTML

<div id="app">
  <sr-el :persons="personsFoo" name="foo" type="number"></sr-el>
  <br>
  <sr-el :persons="personsBar" name="bar" type="text"></sr-el>
</div>

JS

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,
    }
  }
})

Answer 1

从2.5.0 版本开始，Vue 支持动态输入类型，因此您现在可以按照需要绑定type到数据属性：

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

这是一个工作小提琴。

对于仍需要使用 2.5 之前版本的任何人：

这个错误的意思是，如果你动态地改变发送给组件的输入类型，Vue 不会更新输入元素来改变它的类型。

您应该改用v-if语句：

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