Web前端-Vue中给input框赋值

Posted 2022-01-05 MinggeQingchun

Input 输入框

通过鼠标或键盘输入字符

Input 为受控组件，它总会显示 Vue 绑定值。

通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。

Element - The world's most popular Vue UI framework

深入响应式原理 — Vue.js

如下：

<el-input v-model="user.name"></el-input>


export default 
  data () 
    return 
      user:
    
  ,
  methods: 
  

这样虽然可以显示值，但是不能修改
原因：vue实列创建的时候 user的属性名并未声明，因此vue就无法给属性添加getter/setter，从而导致 user 并不是响应式的

解决办法：
方法1：给user给初始值  user:name:""

方法2：this.$set(this.user,'name','张三')