代码之家 › 专栏 › 技术社区 › Gabrielle-M

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

vue.js javascript

-1

Gabrielle-M · 技术社区 · 6 年前

我已经用过 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-BIN 我束缚我 props 价值与 V-模型 使用局部变量。

这是我的代码示例:

<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:''
  }
},

3 回复 | 直到 6 年前

akuiper 6 年前

不能将两个不同的数据源(即v-bind和v-model同时)绑定到同一个输入;如果要从props初始化输入,可以设置数据prop username 具有 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:''
  }
}

gleam 6 年前

v-model="username" 只是一个缩写: :value="username" @input="username = $event"

因此你有:

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

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

Tristan Shelton 6 年前

一般来说 v-bind:value 与 v-model 因为它也与 value . 这个规则的例外是复选框和单选按钮,两者都是有效的(也可能是你从中得到灵感的地方)。在那些情况下 V-模型 实际上绑定到 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" />

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前