input 在使用 model双向绑定时无法更新或延迟更新

[Deanllv]

Version

2.4.2

Reproduction link

https://github.com/Deanllv/vueTest.git

Steps to reproduce

git 项目中存在比对截图,以及编好号的重现流程及效果

出现的问题:
1.在vue2中不声明无法实现即时的双向绑定(截图中 下方输入框呈现的内容 vue1 vue2 vue2init 效果都不相同)

2.在vue2中无法使用第三方库对数据框赋值来改变 vue对象中的值

What is expected?

问题1:
在Vue2中可以不声明属性,只声明vue绑定对象以及旗下一层的子对象,不用声明子对象中的属性

问题2:
提高兼容性可以使用第三方库并改变vue属性中的变量

What is actually happening?

问题1:
在vue2中,如果不提前声明属性,则无法使用双向绑定

问题2:
控件赋值无法赋给属性,只停留在输入框中

---

未避免反馈过长被关闭说明请见git中readme

[jkzing]

因为响应式数据确实是需要声明，参考：
https://cn.vuejs.org/v2/guide/instance.html#属性与方法
https://cn.vuejs.org/v2/guide/reactivity.html。

对于对象，你只需要每次设置时返回对象的拷贝就可以了：

Vue.component('foo', {
  data() {
    return {
      foo: {}
    }
  },
  mounted() {
    this.foo = Object.assign({}, this.foo, {
      bar: 'bar'
    })
  }
})

[Deanllv]

您好,关于 object.observe废弃导致的后期添加的属性无法检测刷新这点已经明白了
虽然还是更喜欢哪种更灵活的用法

那关于第三方控件问题,是否是能够解决的呢

因为在vue1中这些是能够实现的

谢谢您的回复~

[jkzing]

好好读下文档...https://cn.vuejs.org/v2/guide/reactivity.html#变化检测问题

你可以用vm.$set()来动态添加响应数据。

有更多疑问请到forum.vuejs.org提问。

---

It's a usage question more than an issue, let's close it.

[posva]

Please don't create the same issue twice after it gets closed

[javoski]

问题1:
Vue 建议显式地声明所用到的数据，因为这可以让你的代码更清晰明了，更多信息可以看 #5932 。

问题2:
这是因为你所用的插件在选择日期后没有触发 input 元素的 input 事件，所以无法在这里使用 v-model。
我的建议是改用其他更好的日期选择组件，当然如果你还是要用这个插件，也可以使用下面的方式自己封装一个 datepicker 组件：

var DatePicker = {
  template: `
    <div>
      <input id="start_time" :value="value" @input="$emit('input', $event.target.value)" type="text" class="form-control" style="width:300px">
      <img @click="onSelect" src="img/dateicon.png" width="16" height="22" align="absmiddle">
    </div>
  `,
  props: ['value'],
  methods: {
    onSelect: function() {
      WdatePicker({
        el: $dp.$('start_time'),
        onpicked: this.onSelected
      })
    },
    onSelected: function(dp) {
      this.$emit('input', dp.cal.getDateStr())
    }
  }
}

就可以向下面这样使用了:

<date-picker v-model="data.startTime"></date-picker>

BTW，当 Vue 与第三方插件配合使用出现问题的时候，应该优先考虑从第三方插件入手去解决。