Question

本主题与此问题相关... map two 1D arrays into a 2D array and then fill with known values 基本上，我有三个对象集合：颜色，大小和产品。使用axios将这些填充到Vue主要组件data（）中，以从api中获取数据。产品具有引用颜色对象之一和尺寸对象之一的属性。在上面的问题中，我问如何将产品分布为颜色和尺寸的二维数组（并非所有组合都会存在）。我的新问题是如何管理应用程序状态，直到准备好将数据持久化回数据存储为止。

我使用以下代码将产品分发到网格中，这是Vue主要组件上的一种方法

{ 
    fieldname: 'plaintext',
    originalname: '1',
    encoding: '7bit',
    mimetype: 'application/octet-stream',
    destination: 'public/uploads/',
    filename: '1',
    path: 'public/uploads/1',
    size: 0 
 }

所以我想做的是：如果该产品不存在，则创建一个具有selected：false属性的新对象（注意：selected不是this.style.skus []的属性，而是所有其他字段）。这就像在所有网格单元中都有一个对象一样。问题是我有一些功能可以让您将'selected'属性设置为true或false，如果不存在则创建它，并相应地更新UI。对于我在不存在SKU的情况下创建的记录，它运行良好。对于现有的SKU，正在设置属性，但UI不会更新。我追溯到以下事实：后添加属性不存在getter和setter。

如何以正确创建getter和setter的方式添加属性。我不能修改API，因为选择的是UI状态属性，而不是数据的持久属性。我尝试过

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);
},

和

Vue.set(sku,selected,false)

在将api结果保存到数据对象之前对其进行迭代时，但这似乎也不起作用。

任何帮助或建议将不胜感激。对于它的价值，我不需要this.style.skus中的对象的selected属性，只需要currentSKUs []或网格中的sku对象，因为这些仅用于UI控件。

Answer 1

我已经解决了以下问题：我不确定这是正确的方法，但是它可以达到我的目的。我已经拦截了API结果集，并通过res.data进行了迭代，以将selected：false注入到每个记录中。

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

问题在于所选属性位于数据对象上，但我不需要从那里引用它，而仅从我的（大）子组件中引用它，因为数据收集只是潜在对象的一个子集记录，但这可能对其他人有帮助。

为清楚起见，您必须在将记录写入Vue应用程序中的data（）之前注入其他属性，因为当添加对象以生成getter和setter时，它将使对象移动。更改属性将触发事件观察器。如果在创建后添加属性，则不会创建getter和setter，并且会失去反应性。

vue.js将getter和setter添加到后期绑定的属性中

1 个答案: