Vue.js vuejs：计算值的对象类型可以'；t支持双向数据绑定

在我的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.component（'service'）{
模板：“”+
{{serviceData.serviceName}}}+
'' +
'',
道具：['serviceData']，
})
var demo=新的Vue({
el:'演示'，
数据：{
所有数据：{
serviceName:'Service1'，
服务类型：“0”，
其他信息：“xxxinfo”，
},
},
计算：{
serviceData（）{
返回{
serviceName:this.allData.serviceName，
serviceType:this.allData.serviceType，
};
},
},
})

如上所述，在我的Vue实例中，我拥有

alldata

的原始数据，这是一种对象类型。因为它包含一些其他无关的信息。我通过

computed

创建了一个只包含相关信息的对象，并将其命名为

serviceData

并通过

props

将serviceData对象传递给组件

service

在

service

组件中，我有一个输入元素，它通过v-model双向绑定到

serviceData.serviceName

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

那么，在这种情况下，如何增加反应性呢

请参阅此现场演示：

---

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

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

这样做显然需要调整传入的

道具。此外，如果使用此方法，Vue将警告您在
props
中传递的变异

更好的方法或基本正确的方法是通过自定义事件在子组件中发出事件。
答案如下：

您可以本地化组件中的日期，这样就可以正常工作

local: this.serviceData

我认为将vuex与您的应用程序相结合是最好的方法。