Vuejs вычисленный установщик данного свойства не реагирует

Question

Я использую computed, чтобы скопировать значение проп и использовать / изменить его в моем компоненте:

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

Проблема в использовании сеттера. Это не реактивно. Когда я использую какой-либо ввод, возникает задержка, поэтому мое вычисленное предложение не обновляется мгновенно. Пример ввода:

    <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"

Как вы можете видеть здесь, сеттер никогда не вызывается при нормальной работе, и, следовательно, ваш код для его сохранения не запускается.

Вы можете решить эту проблему, сделав другую вычисленную опору для названия предложения, а затем добавив некоторый код, чтобы предотвратить отмену ваших изменений.

Давайте начнем с getter & setter для заголовка:

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

Теперь нам нужно правильно обработать эту операцию множества внутри нашей основной функции предложения, потому что, если мы не обработаем ее и в основном не изменим ее возвращенный объект, мы попадем на территорию неопределенного поведения, так как значение вычисления не совпадает расчет.

    // ... 

    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или добавьте больше логики в другую вычисляемую переменную, которая информирует пользователя о конфликте данных и просит его перезаписать свои данные.