this code:
<b-col md="6">
<b-form-group label="Sub Matter" label-for="sub_matter">
<div class="d-flex align-items-center">
<div class="w-100">
<b-form-select v-model="matter.sub_matter" :options="subMatterOptions"
disabled></b-form-select>
</div>
<div>
<b-button variant="primary" class="ml-2" @click="addSubMatter"
v-if="subMatters.length < 9">
+
</b-button>
</div>
</div>
</b-form-group>
</b-col>
will show select list (disabled) and will show the value of matter.sub_matter and if i click “+” button it will add new select list with v-model=”sub_matter_2″ and if i click “+” button it will add another select list with v-model=”sub_matter_3″ and so on until sub_matter_10
this code:
<b-col md="6" v-for="(subMatterKey, index) in subMatters" :key="index">
<b-form-group :label="`Sub Matter ${index + 2}`" :label-for="`sub_matter_${index + 2}`"
v-if="shouldDisplaySubMatter(subMatterKey)">
<div class="d-flex align-items-center">
<div class="w-100">
<b-form-select v-model="matter[subMatterKey]"
:options="subMatterOptions"></b-form-select>
</div>
<div>
<b-button variant="danger" class="ml-2" @click="removeSubMatter(index)">
-
</b-button>
</div>
</div>
</b-form-group>
</b-col>
will be showing when i press “+” button from the first button
this is the script:
data() {
return {
subMatterOptions: [
{ value: 'SubSale (SS)', text: 'SubSale (SS)' },
{ value: 'Direct Developer (DD)', text: 'Direct Developer (DD)' },
{ value: 'Auction (A)', text: 'Auction (A)' },
{ value: 'Love and Affection (Gift)', text: 'Love and Affection (Gift)' },
{ value: 'Perfection of Transfer (POT)', text: 'Perfection of Transfer (POT)' },
{ value: 'Perfection of Charge (POC)', text: 'Perfection of Charge (POC)' },
{ value: 'Discharge of Charge (DC)', text: 'Discharge of Charge (DC)' },
{ value: 'Deed of Receipt and Reassignment (DRR)', text: 'Deed of Receipt and Reassignment (DRR)' },
{ value: 'LOAN', text: 'LOAN' },
{ value: 'Others', text: 'Others' },
],
subMatters: ['sub_matter_2', 'sub_matter_3', 'sub_matter_4', 'sub_matter_5', 'sub_matter_6', 'sub_matter_7', 'sub_matter_8', 'sub_matter_9', 'sub_matter_10'],
matter: {
sub_matter: "",
sub_matter_2: "",
sub_matter_3: "",
sub_matter_4: "",
sub_matter_5: "",
sub_matter_6: "",
sub_matter_7: "",
sub_matter_8: "",
sub_matter_9: "",
sub_matter_10: "",
}
};
},
computed: {
filteredSubMatters() {
return this.subMatters.filter(
(subMatterKey) =>
this.matter[subMatterKey] !== null && this.matter[subMatterKey] !== "",
console.log(subMatterKey)
);
},
},
methods: {
shouldDisplaySubMatter(subMatterKey) {
console.log("subMatters",this.subMatters)
console.log("sub_matter_2",this.matter.sub_matter_2)
console.log("sub_matter_3",this.matter.sub_matter_3)
console.log("sub_matter_4",this.matter.sub_matter_4)
console.log("sub_matter_5",this.matter.sub_matter_5)
console.log("sub_matter_6",this.matter.sub_matter_6)
console.log("sub_matter_7",this.matter.sub_matter_7)
console.log("sub_matter_8",this.matter.sub_matter_8)
console.log("sub_matter_9",this.matter.sub_matter_9)
console.log("sub_matter_10",this.matter.sub_matter_10)
if (this.subMatters.indexOf(subMatterKey) === 0) {
return true;
}
const precedingSubMatters = this.subMatters.slice(0, this.subMatters.indexOf(subMatterKey));
for (const key of precedingSubMatters) {
if (this.matter[key] !== '') {
return true;
}
}
return this.matter[subMatterKey] !== null;
},
addSubMatter() {
if (this.subMatters.length < 9) {
const newSubMatterKey = `sub_matter_${this.subMatters.length + 2}`;
this.subMatters.push(newSubMatterKey);
}
},
removeSubMatter(index) {
const subMatterKey = this.subMatters[index];
this.matter[subMatterKey] = "";
this.subMatters.splice(index, 1);
},
}
what i’m trying to do is if any of matter.sub_matter_2 until matter.sub_matter_10 has value i want to display its select list otherwise if its empty i don’t want its select list to be displayed (i can add it from “+” button)
currently all select lists are showing, i’m trying to show only select list that has value
in this function:
shouldDisplaySubMatter(subMatterKey) {
console.log("subMatters",this.subMatters)
console.log("sub_matter_2",this.matter.sub_matter_2)
console.log("sub_matter_3",this.matter.sub_matter_3)
console.log("sub_matter_4",this.matter.sub_matter_4)
console.log("sub_matter_5",this.matter.sub_matter_5)
console.log("sub_matter_6",this.matter.sub_matter_6)
console.log("sub_matter_7",this.matter.sub_matter_7)
console.log("sub_matter_8",this.matter.sub_matter_8)
console.log("sub_matter_9",this.matter.sub_matter_9)
console.log("sub_matter_10",this.matter.sub_matter_10)
if (this.subMatters.indexOf(subMatterKey) === 0) {
return true;
}
const precedingSubMatters = this.subMatters.slice(0, this.subMatters.indexOf(subMatterKey));
for (const key of precedingSubMatters) {
if (this.matter[key] !== '') {
return true;
}
}
return this.matter[subMatterKey] !== null;
},
what am i doing wrong?
note: the above code is update form so sub_matter, sub_matter_2, sub_matter_3 and sub_matter_4 has value, these are the outputs of the console log:
console.log("subMatters",this.subMatters) value is:
subMatters
Array(9) [ "sub_matter_2", "sub_matter_3", "sub_matter_4", "sub_matter_5", "sub_matter_6", "sub_matter_7", "sub_matter_8", "sub_matter_9", "sub_matter_10" ]
console.log("sub_matter_2",this.matter.sub_matter_2) value is: sub_matter_2 Direct Developer (DD)
console.log("sub_matter_3",this.matter.sub_matter_3) value is: sub_matter_3 Auction (A)
console.log("sub_matter_4",this.matter.sub_matter_4) value is: sub_matter_4 Love and Affection (Gift)
console.log("sub_matter_5",this.matter.sub_matter_5) value is: sub_matter_5 null
console.log("sub_matter_6",this.matter.sub_matter_6) value is: sub_matter_6 null
console.log("sub_matter_7",this.matter.sub_matter_7) value is: sub_matter_7 null
console.log("sub_matter_8",this.matter.sub_matter_8) value is: sub_matter_8 null
console.log("sub_matter_9",this.matter.sub_matter_9) value is: sub_matter_9 null
console.log("sub_matter_10",this.matter.sub_matter_10) value is: sub_matter_10 null