vue.js - vue为什么v-model绑定Object的时候不生效？

问题描述

问 题

简单描述：当vue的data里面有一个属性是Object类型的时候，v-model绑定就失效了。

这里有一段在线代码：https://jsfiddle.net/oukichi/...

不想看在线代码的话，我把简单的代码贴出来：

<div id="app">
  <div>
    {{ob.txt}}
    <input type="text" v-model="ob.txt">
  </div>
  <div>
    {{name}}
    <input type="text" v-model="name">
  </div>
</div>

new Vue({
    el:'#app',
  data:{
      name:'张三',
    ob:{}
  },
})

代码很简单，name属性是普通字符串，ob属性是一个对象。
当我在第一个input输入的时候，我的{{ob.txt}}表达式应该有相应的变化，然而事实并没有。
当我在第二个input输入的时候，{{name}}表达式可以正常产生变化。

似乎v-model和Object类型的属性无法成功绑定，请问这是怎么回事呢？

解决方案

应该是你在model里面没有定义txt吧，试试这么写呢？

new Vue({
    el:'#app',
    data:{
      name:'张三',
      ob:{
        txt: '李四'
      }
  },
})

这篇关于vue.js - vue为什么v-model绑定Object的时候不生效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！