vue.js - Vue2 : v-model does not support dynamic input types

Question

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

v-model does not support dynamic input types. Use v-if branches instead.

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

截至version 2.5.0 ，Vue 支持动态输入类型，因此您现在可以将 type 绑定(bind)到您想要的数据属性:

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

Here's a working fiddle.

---

对于仍然需要使用 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">