v-model does not support dynamic input types.

This error message is generated if you try and have both a v-model and a :type="foo" property for an input.

In my case what I'm trying to do is:

<template>
        <label :for="field" class="control-label">{{label}}</label>

        <input :type="type" :id="field" class="form-control" :name="field" v-on:blur="blurred" v-model="liveValue">

</template>

<script>
    export default {
        props: ['field','label','type','classes','errors','initialValue'],
    }
</script>

Perhaps worth mentioning that I don't actually need the type to be dynamic after it has been created. Is there a way of doing something akin to v-once on the type in order to satisfy the "non-dynamic" requirement?

The compiler gives the advice "Use v-if branches instead". Is the below implementation what's meant by that or is there an inline way of achieving this that avoids duplicating the line:

<input v-if="type === 'email'" type="email" :id="field" class="form-control" :name="field" v-on:blur="blurred" v-model="liveValue">
<input v-else-if="type === 'number'" type="number" :id="field" class="form-control" :name="field" v-on:blur="blurred" v-model="liveValue">
<input v-else type="text" :id="field" class="form-control" :name="field" v-on:blur="blurred" v-model="liveValue">