问题:

如图,往输入框中输入了’abc’,但输入框并不显示,而alert出来的输入框的值为’c’

html和js代码(这是在element-ui在线编辑器里写的代码,请自行修改):
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<div id="app">
<el-input v-model="a.c" placeholder="请输入内容"></el-input>
  <el-button @click="button">BTN</button>
</div>
var Main = {
  data() {
    return {
      a: {
      b:''
    }
    }
  },
  methods: {
    button () {
      alert(this.a.c)
    }
  },
  created () {
    this.a.c = ''
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
分析原因(个人见解!):

首先了解一下Vue.js的深入响应式原理:Vue深入响应原理
以及该原理用到的方法:Object.defineProperty()

element-ui官网对input的描述是:
Input 为受控组件,它总会显示 Vue 绑定值。通常情况下,应当处理 input 事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变

而v-model的定义是:
v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。

可以看到我输入的值的确绑定到了data的对象a的属性c上,这完成了一个方向的绑定,但由于我给对象a添加的属性c默认为数据描述符(详见Object.defineProperty()链接),所以属性c没有getter和setter属性,vue就无法监听到属性c的变化,也就无法将属性c的值绑定回input控件了,因此实际上输入操作只完成了单向数据绑定,输入框不显示数据,但属性c还是会被改变

以上是个人理解,不一定正确!

Logo

前往低代码交流专区

更多推荐