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

Question

简单描述：当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类型的属性无法成功绑定，请问这是怎么回事呢？

Answer 1

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

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

Answer 2

如果未知obj中需要定义哪些属性，可以把v-model展开，如文档所述，v-model其实是一种语法糖。

<div id="app">
  <div>
    {{ob.txt}}
    <input type="text" v-bind:value="ob.txt" v-on:input="oninput($event.target.value)">
  </div>
  <div>
    {{name}}
    <input type="text" v-model="name">
  </div>
</div>

new Vue({
  el:'#app',
  data:{
    name:'张三',
    ob:{}
  },
  methods: {
    oninput(val) {
      this.$set(this.ob, 'txt', val)
    }
  }
})

如此这般

Answer 3

楼上的方法可以，但是如你所说，不知道obj里面需要定义什么东西，又需要里面的东西得到双向绑定的话，你需要使用Vue.set(obj, key, value)，官方文档写得很清楚，你可以去看下。