In my database, I have a collection of products with a column named attributes that stores property/value pairs in JSON format. Each product can have unique attributes. For instance, one product's attributes could be:
#product1
attributes {
color: "green",
size: "small"
}
While another product's attributes might look like this:
#product2
attributes {
width: "12inches",
height: "11inches
}
I am currently developing a form to Create, Read, Update, and Delete (CRUD) these products, including their dynamic attributes. The current setup is as follows:
https://i.sstatic.net/HBXIH.png
I'm using PrimeVue framework to build this application and form, and I'm attempting to bind these property/value pairs to some PrimeVue components (InputText). These components require a Vue data property to be bound using the v-model directive on the input fields. The code snippet for this is shown below:
<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" />
The corresponding Vue data is structured like this:
export default {
data() {
return {
product {
}
}
}
}
Upon parsing the JSON retrieved from the database table, the output appears in the Vue developer tools window as shown here: https://i.sstatic.net/HWWeB.png
My initial plan was to use v-for to iterate through the properties and values dynamically and create each Input field accordingly, but this approach did not work. It seems that my lack of understanding on how these functionalities interact is hindering progress. I attempted this method:
<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"> : </span>
<InputText v-model="value" id="attributes_value" placeholder="value" />
</div>
</div>
However, an error stating '
'v-model' directives cannot update the iteration variable 'key' itselfv-for properly to access the property/value pairs. Any help would be greatly appreciated.