Vue2：V模型不支持動態輸入類型

Question

當試圖創建動態輸入元素我得到一個模板編譯錯誤是這樣的：

V模型不支持動態輸入類型。改用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

截至version 2.5.0，Vue公司支持動態輸入的類型，所以你現在能結合type爲數據屬性像你想要的：

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