Vue2: v-Modell unterstützt keine dynamischen Eingangstypen

Question

Beim Versuch, dynamische Eingabeelemente erstellen erhalte ich eine Vorlage Fehler wie folgt kompilieren:

V-Modell unterstützt nicht dynamische Eingabetypen. Verwenden Sie stattdessen v-if-Zweige .

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

Ab version 2.5.0 unterstützt Vue dynamische Eingabetypen, so dass man nun in der Lage sind type an eine Daten Eigenschaft zu binden wie du willst:

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

Here's a working fiddle.

---

Für alle, die noch früher eine Version verwenden muss als 2,5:

dieser Fehler Was sagt, ist, dass, wenn Sie dynamisch den Eingabetyp an die Komponente gesendet wird, ändern , Vue wird das Eingabeelement nicht aktualisieren, um seinen Typ zu ändern.

sollten Sie v-if Anweisungen verwenden statt:

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