vuejs：计算值的对象类型不支持双向数据绑定

Question

在我的 Vuejs（2.x 版本）中，我遇到如下情况：

Vue.component('service',{
    template: '<div>' +
              '<div>{{serviceData.serviceName}}</div>' +  
              '<input v-model="serviceData.serviceName">' +
              '</div>',
    props: ['serviceData'],
})

var demo = new Vue({
    el: '#demo',
    data: {
        allData: {
            serviceName: 'Service1',
            serviceType: '0',
            otherInfo: 'xxxinfo',
        },
    },
    computed: {
        serviceData() {
            return {
                serviceName: this.allData.serviceName,
                serviceType: this.allData.serviceType,
           };
        },
    },
 })

 <div id="demo">
    <service :service-data="serviceData"></service>
 </div>

如上，在我的Vue实例中我有alldata的原始数据，它是一个对象类型。并且由于它包含一些其他不相关的信息。我通过 computed 创建了一个只包含相关信息的对象并将其命名为 serviceData。

并通过 props 将 serviceData 对象传递给组件 service。
在 service 组件中，我有一个输入元素，它通过 v-model 以两种方式绑定到 serviceData.serviceName。

但事实证明，双向绑定无法正常工作。

那么在这种情况下如何添加反应性。

请参考现场演示：

https://jsfiddle.net/baoqger/t3mr9de3/1/

Answer 1

我不确定您是否可以使用嵌套计算对象。但是你可以使用一般的following。

  computed: {
    serviceName: {
      get: function() {
        return this.allData.serviceName
      },
      set: function(newVal) {
        this.allData.serviceName = newVal;
      }
    }
  }

这样做你显然必须调整传入的props。此外，如果您使用此方法，Vue 将警告您关于 props.

中传递的变异

更好的方法或基本上正确的方法是 $emit 通过自定义事件在您的子组件中创建一个事件，并相应地 update the data in your parent component。

Answer 2

答案在这里：https://jsfiddle.net/66ffqtej/

你可以把组件中的日期本地化，可以吗

local: this.serviceData

vuejs：计算值的对象类型不支持双向数据绑定

vuejs: object type of computed value can't support two-way data binding

vue.js

two-way