I've created a product checkbox selection feature that dynamically shows or hides text fields based on the user's selection.
Unfortunately, there is a glitch in the system where selecting the second item causes duplication of text fields from the first item and so on.
If you want to take a look at the code, you can visit it here.
The technologies used are Vue 2 and an outdated version of Vuetify - 1.5
On the HTML side:
<v-container grid-list-lg>
<v-layout row wrap>
<v-flex xs12>
<div v-for="(item, index) of products" :key="index">
<v-checkbox
hide-details
v-model="selectedProducts"
:label="item.name"
:value="item.name"
@change="showFields()"
>
</v-checkbox>
</div>
</v-flex>
</v-layout>
<v-layout row wrap v-for="(product, index) of selectedProducts" :key="index">
<v-flex xs12>
<h4>{{product}}</h4>
</v-flex>
<v-flex xs12 v-for="(item, index) of rowItems" :key="index">
<v-text-field
label="Price"
v-model="item.price"
></v-text-field>
</v-flex>
</v-layout>
</v-container>
On the JS side:
new Vue({
el: '#app',
data() {
return {
products: [
{
name: 'Item A',
id: 1,
price: 10
},
{
name: 'Item B',
id: 2,
price: 20
},
{
name: 'Item C',
id: 3,
price: 30
},
],
rowItems: {},
selectedProducts: []
}
},
methods: {
showFields(){
for (let item of this.selectedProducts){
this.rowItems[item] = [{
price: ''
}]
}
}
}
})