Question

我在表单输入字段中使用了v-bind和v-model。但是当我运行npm run dev命令时，显示的是：v-bind:value="user.name" conflicts with v-model on the same element because the latter already expands to a value binding internally error。

在v-bind中绑定我的props值，在v-model中使用局部变量。

这是我的代码示例：

<label>Name</label>
      <input name="name" class="form-control" v-bind:value="user.name" v-model="username"/>
 props:{

  user:{
    type:[Array,Object],
    required:true,
  },

},
data(){
  return{

   username:'',
   email:'',
   id:''
  }
},

Answer 1

您不能将两个不同的数据源（即，同时使用v-bind和v-model）绑定到同一输入；如果要初始化props的输入，则可以使用username设置数据prop this.user.name，而无需使用v-bind:value：

<input name="name" class="form-control" v-model="username"/>
 props:{

  user:{
    type:[Array,Object],
    required:true,
  },

},
data(){
  return{

   username: this.user.name,
   email:'',
   id:''
  }
}

Answer 2

v-model="username"只是以下各项的简写： :value="username" @input="username = $event"

结果是：

<input
  name="name"
  class="form-control"
  :value="user.name"
  :value="username"
  @input="username = $event"
/>

这是错误-vue不知道要输入什么

Answer 3

通常，v-bind:value与v-model冲突，因为它也绑定到value。该规则的例外是复选框和单选按钮，两者均有效（并且可能是您产生创意的地方）。在这种情况下，v-model实际上绑定到selected属性。

<!-- Valid, binds to selected -->
<input type="checkbox" name="fruits" :value="currentFruit" v-model="selectedFruits" />
<input type="radio" name="animal" :value="currentAnimal" v-model="selectedAnimal" />

<!-- Not valid, both bind to value -->
<input type="text" :value="currentName" v-model-"currentName" />

Vue组件中的Vue.js v-bind和v-model绑定问题

3 个答案: