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。

并通过service将serviceData对象传递给组件props。
在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通过自定义事件{/ 3}}在您的子组件中发生一个事件。

Answer 2

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

你可以在组件中本地化日期，它是否可以工作。

local: this.serviceData

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

2 个答案: