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

回答:

如果未知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)
    }
  }
})

如此这般

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注