I am currently working on designing a form that enables users to create different variations for a product within a Nuxt/Vue application.
- The goal is to provide users with the ability to specify attributes for each variation using a text field. These attributes will then be associated with the variants, and users can set their values as shown in the workflow below.
- One challenge I'm facing is that when a user adds a new property to a variant, this new property is not automatically included in existing variants. My aim is to ensure that any newly added property is also applied to all previously created variants and any future ones.
- Additionally, I would like to implement functionality that removes any attributes from the variants text field if they have been deleted.
Can anyone offer a solution to help me address this issue?
https://i.sstatic.net/P9SWR.gif
Here is the code snippet:
<template>
<div class="variant-holder mb-4">
<div
v-for="(variant, vindex) in form.variants"
:key="vindex"
class="variant table-responsive border rounded bg-white shadow-sm position-relative"
>
<button class="btn btn-sm btn-secondary-light px-2 position-absolute right-0 top-0">
<b-icon icon="trash" variant="danger"></b-icon>
</button>
<b-table-simple borderless class="small">
<b-tbody>
<b-tr v-for="(detail, index) in variant.details" :key="index">
<b-td class="align-middle">
<span class="capital">{{ detail.property }}</span>
</b-td>
<b-td class="align-middle">
<b-form-input v-model.trim="detail.value" size="sm" type="text" required></b-form-input>
</b--td>
</b-tr>
</b-tbody>
</b-table-simple>
</div>
</div>
<b-button type="button" class="btn btn-sm btn-secondary-light btn-block mb-4" @click="addVariantComponent"">
<b-icon icon="plus"></b-icon>
Add another variant
</b-button>
</template>
<script>
export default {
data() {
return {
form: {
variant: {
attributes: [],
},
variants: [],
},
}
},
methods: {
addVariantComponent() {
const variant = {
details: this.variantDetails(),
};
this.form.variants.push(variant);
},
variantDetails() {
const details = [];
this.form.variant.attributes.forEach((attribute) => {
details.push({ property: attribute, value: '' });
});
return details;
},
},
}
</script>