Question

我正在使用compute来复制我的prop值并在我的组件中使用/ mutate：

export default {
  props: ['propOffer'],
  computed: {
    offer: {
      get: function () {
        return JSON.parse(JSON.stringify(this.propOffer))          
      },
      set: function () {
        this.offer
      }
    },
   }

问题在于使用setter。它不是被动的。当我使用某种输入时，会有延迟，因此我的计算报价不会立即更新。输入示例：

    <v-text-field
    label="Offer title"
    v-model="offer.title"
    ></v-text-field>

这与我将offer声明为变量（未计算）时的行为完全相反 - 然后我在{{offer}}

内立即获得<template>次更改

我该如何改进？我设置我的计算错误了吗？

Answer 1

为了更好地了解这种情况，这就是目前发生的情况：

当应用程序加载时，初始状态为：

<your-component>
propOffer: '{"title":"test"}'
offer.<lastValue>: undefined

此时，您的应用程序将加载v-text-field，此引用字段offer，并且这将加载offer计算变量：

<your-component>
propOffer: '{"title":"test"}'
offer.<lastValue>: [Javascript object 1]

[Javascript object 1]
title: "test"

<v-text-field>
value: "test"

当用户输入v-text-field时，其值会发生变化，因为v-model会发回更新：

<your-component>
propOffer: '{"title":"test"}'
offer.<lastValue>: [Javascript object 1]

[Javascript object 1]
title: "test123"

<v-text-field>
value: "test123"

正如您在此处所看到的，在正常操作中永远不会调用setter，因此保存它的代码不会运行。

您可以通过为要约的标题制作另一个计算道具来解决此问题，然后添加一些代码以防止您的更改被撤消。

让我们先从吸气者＆amp;标题的设定者：

computed: {
    title: {
        get() {
            return this.offer.title;
        },
        set(title) {
            this.offer = {...this.offer, title};
        }
    },
    // ....

现在我们需要在main offer函数中正确处理这个set操作，因为如果我们不处理它，并且基本上修改它返回的对象，我们就会进入未定义行为的领域，作为计算与计算不匹配。

    // ... 

    offer: {
        get: function () {
            if (this.modifiedOffer) {
                return this.modifiedOffer;
            }
            return JSON.parse(JSON.stringify(this.propOffer))          
        },
        set: function (offer) {
            this.modifiedOffer = offer;
        }
    },
},
data() {
    return: {
        modifiedOffer: undefined,
    };
},

执行此模式后，您现在拥有一个稳定的应用程序，它没有显示任何未定义的行为，对于更多功能，您基本上需要检查propOffer是否发生更改，并强行删除this.modifiedOffer，或者向不同的计算变量添加更多逻辑，通知用户存在数据冲突，并要求他覆盖他的数据。

vuejs计算的给定道具的setter不是反应性的

1 个答案: