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您的子組件中的事件。