vue.js добавление геттеров и сеттеров к свойствам с поздней привязкой - PullRequest
Новая
       26

vue.js добавление геттеров и сеттеров к свойствам с поздней привязкой

0 голосов
/ 07 марта 2019

Эта тема связана с этим вопросом ... отобразить два одномерных массива в двумерный массив и затем заполнить известными значениями в основном у меня есть три коллекции объектов: цвета, размеры и продукты. Они заполняются в данные основного компонента Vue () с помощью axios для извлечения данных из API. Продукт имеет свойства, которые ссылаются на один из цветных объектов и один из объектов размера. В вышеупомянутом вопросе я спросил, как распределить продукты в двумерный массив цветов и размеров (не все комбинации будут существовать). Моя новая проблема заключается в том, как управлять состоянием приложения, пока я не буду готов сохранить данные обратно в хранилище данных.

Я распространяю продукты по сетке с помощью следующего кода, который является методом основного компонента Vue 

buildDimensions(){
/* build a new array, pulling the SKU out to be a key so that we can map them into the grid*/
    currentSKUs = this.style.skus.reduce((currentSKUs,sku) => currentSKUs.set(sku.sku,sku),new Map);
    result = this.style.colours.map(
        colourRow => this.style.sizes.map(
            sizeColumn => ({
                key: this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim(),
                value: currentSKUs.get(
                    this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim()
                    ) || {
                             colour_code: colourRow.colour_code.trim(),
                             size_code: sizeColumn.size_code.trim(),
                             lifecycle: "Not Created",
                             sku:this.style.name.trim() + colourRow.colour_code.trim() + sizeColumn.size_code.trim(),
                             selected:false
                         }
                        })
                    )
                );
    this.matrix = [];
    this.matrix.push(result);
},

Итак, что я пытаюсь сделать: если продукт не существует, создайте новый объект со свойством selected: false (ПРИМЕЧАНИЕ. Selected не является свойством this.style.skus [], но все другие поля есть). И это работает, так как во всех ячейках сетки есть объект. Проблема в том, что у меня есть некоторые функции, которые позволяют установить свойство selected в значение true или false, создав его, если оно не существует, и соответствующим образом обновить пользовательский интерфейс. Для записей, которые я создаю, где SKU не существует, это работает отлично. Для существующих SKU свойство устанавливается, но пользовательский интерфейс не обновляется. Я проследил это до того факта, что геттер и сеттер не существуют для свойства, добавленного позднее.

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

Vue.set(sku,selected,false)

и 

sku = Object.assign({}, sku,{selected:false})

при переборе результатов API перед сохранением их в объекте данных, но это тоже не сработало.

Буду очень признателен за любую помощь или предложения. Для чего бы это ни стоило, мне не нужно свойство selected для объекта в this.style.skus, только для currentSKUs [] или объектов sku в сетке, поскольку они предназначены только для управления пользовательским интерфейсом.

1 Ответ

0 голосов
/ 08 марта 2019

Я исправил проблему следующим образом: я не уверен, что это правильный путь, но он работает для моих целей.Я перехватил набор результатов API и перебрал res.data, чтобы вставить selected: false в каждую запись. 

.then((res) => {
         for(sku of res.data){
             sku = Object.assign(sku, {selected:false});
         }
         app.style.skus = res.data;
      }
)

Проблема в том, что выбранное свойство живет в объекте данных, но я неникогда не нужно ссылаться на него оттуда, только из моего (большого) дочернего компонента, так как сбор данных является лишь подмножеством потенциальных записей, но это может помочь кому-то еще.

Для ясности, вы должныдобавьте дополнительные свойства перед записью записей в data () в приложении Vue, потому что оно будет проходить объекты при их добавлении для генерации методов получения и установки.изменение свойств вызовет наблюдателей событий.Если вы добавляете свойства после создания, тогда методы получения и установки не создаются, и вы теряете реактивность.

...