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型模型的双向绑定到serviceData.serviceName。

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

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

请参阅本现场演示：

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

Answer 1

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

你可以本地化的日期的组成部分，它可以可以工作。

local: this.serviceData 

Answer 2

我不知道，如果你可以使用嵌套的计算对象。但一般情况下，您可以使用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您的子组件中的事件。