Question

当尝试创建动态输入元素时，我得到一个模板编译错误，如下所示：

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

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

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

1 个答案: