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

Question

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

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

而另一个可能看起来像：

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

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

我正在使用 PrimeVue 创建此应用程序和表单，并尝试将这些 property/value 对绑定到某些 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 {
            
          }
      }
    }
}

从数据库table解析传入的JSON后，是这样的（这是Vue dev工具）：

我的计划是使用 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 循环访问 property/value 对。非常感谢。

Answer 1

扩展评论：

As the error states, you cannot edit the key directly. You'd need to extract the key value pairs into a new array of objects and reference this new array while editing and reconstruct the products once you are done editing.

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

..
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 数组并在更新时重建产品数组，例如，在计算变量中

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

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

using v-for to iterate through json where id's are all different and bind them to Input in PrimeVue

javascript

json

vue.js

vuejs2

primevue