使用 v-for 遍历 id 都不同的 json 并将它们绑定到 PrimeVue 中的 Input

Posted 2023-02-16

【中文标题】使用 v-for 遍历 id 都不同的 json 并将它们绑定到 PrimeVue 中的 Input

【英文标题】：using v-for to iterate through json where id's are all different and bind them to Input in PrimeVue

【发布时间】：2021-10-01 00:14:32

【问题描述】：

我有一个产品数据库，其中有一列名为 attributes 的列将属性/值对存储为 JSON。例如，我可以有一个产品，该产品将具有属性，但每个产品的属性永远不会相同。所以一个产品可能看起来像：

#product1
attributes 
  color: "green",
  size: "small"

虽然另一个可能看起来像：

#product2
attributes 
  width: "12inches",
  height: "11inches

我正在为 CRUD 产品设置一个表单，包括这些动态属性。到目前为止，它看起来像这样：

我正在使用 PrimeVue 创建这个应用程序和表单，并尝试将这些属性/值对绑定到一些 PrimeVue components (InputText)。他们需要在输入上使用 v-model 绑定一个 vue 数据属性。上面的截图在这里编码：

<InputText v-model="product.attribute_property" id="attribute_property" placeholder="key" />
  <span class="p-inputgroup-addon"> : </span>
<InputText v-model="product.attribute_value" id="attribute_value" placeholder="value" />

绑定到这些：

export default 
    data() 
        return 
          product 
            
          
      
    

从数据库表中解析传入的 JSON 后，它看起来像这样（这是 Vue 开发工具）：

我的计划是使用v-for 遍历属性及其值并动态创建每个输入，但这不起作用。我知道这是由于我对所有这些如何运作的知识贫乏。我试过了：

<div v-for="(value, key) in attributes" :key="key">
  <div class="p-inputgroup">
    <InputText v-model="key" id="attributes_key" placeholder="key" />
    <span class="p-inputgroup-addon">&nbsp;:&nbsp;</span>
    <InputText v-model="value" id="attributes_value" placeholder="value" />
  </div>
</div>

但它抱怨'v-model' directives cannot update the iteration variable 'key' itself。我知道我没有正确地遍历 JSON，但我不知道正确或最好的方法。这里的最终目标是将这些属性绑定到输入并为产品创建动态属性。我只是不确定如何循环使用v-for 来访问属性/值对。非常感谢。

【问题讨论】：

由于错误状态，您无法直接编辑密钥。您需要将键值对提取到一个新的对象数组中，并在编辑时引用这个新数组，并在完成编辑后重建产品。

我认为这让我感到困惑......我已经将这些值放入一个新的数据属性并在 mounted() this.attributes = JSON.parse(this.prod.attributes); 期间解析 JSON

给我几分钟。我会试一试的。

我相信会做到的！我没想过用静态键重建对象，命名每个值。谢谢！如果你愿意回答，我很乐意接受。

由于无法直接操作对象键，所以必须这样做。

【参考方案1】：

在 cmets 上扩展：

由于错误状态，您无法直接编辑密钥。您需要将键值对提取到一个新的对象数组中，并在编辑时引用这个新数组，并在完成编辑后重建产品。

将键值对提取到新的对象数组中，

..
data() 
return 
  attributes: 
    color: "green",
    size: "small",
  ,
  newAttributes: [],
 ;
,

//once mounted:
mounted: function () 
 let attributes = this.attributes;
 let keys = Object.keys(attributes);
 let newValues = [];
 keys.forEach((attrKey, i) => 
   let s = ;
   s["key"] = attributes[attrKey];
   s["val"] = attrKey;
   newValues.push(s);
 );
 this.newAttributes = newValues;
,

循环遍历 newAttributes 数组，并在更新时重建 products 数组，例如，在计算变量中

computed: 
 reFormattedAttributes: function () 
   let attributes = this.newAttributes;
   let formatted = ;
   Array.from(attributes).forEach((attribute) => 
     formatted[attribute["key"]] = attribute["val"];
   );
   return formatted;
 ,
,