Below is a simplified version of the code :
<template>
/* ----------------------------------------------
* Displaying a list of templates, @click to select the template
/* ----------------------------------------------
<ul>
<li
v-for="form in forms.forms"
@click="selectTemplate(form)"
:key="form.id"
:class="{selected: templateSelected == form}">
<h4>{{ form.name }}</h4>
<p>{{ form.description }}</p>
</li>
</ul>
/* ----------------------------------------------------
* Displaying the "Editable fields" of the selected template
/* ----------------------------------------------------
<div class="form-group" v-for="(editableField, index) in editableFields" :key="editableField.id">
<input
type="text"
class="appfield appfield-block data-to-document"
:id="'item_'+index"
:name="editableField.tag"
v-model="editableField.value">
</div>
</template>
<script>
export default {
data: function () {
return {
editableFields: [],
}
},
methods: {
selectTemplate: function (form) {
/* ------------------
* The issue lies here
*/ ------------------
for (let i = 0; i < form.editable_fields.length; i++) {
this.editableFields.push(form.editable_fields[i]);
}
}
}
}
</script>
The challenge I am facing is that Vuejs does not update the display when the array EditableFields is modified. To address this issue, I have referred to the documentation, which suggests using $set or Array instance methods like splice and push.
The current implementation (using push) works, but the array never gets cleared, causing the "editable fields" to accumulate, an undesirable behavior.
To clear the array before populating it with new data, I have attempted multiple approaches without success:
this.editableFields.splice(0, this.editableFields.length);
for (let i = 0; i < form.editable_fields.length; i++) {
this.editableFields.push(form.editable_fields[i]);
}
==> Does not update the display
for (let i = 0; i < form.editable_fields.length; i++) {
this.$set(this.editableFields, i, form.editable_fields[i]);
}
==> Does not update the display
this.editableFields = form.editable_fields;
==> Does not update the display
One solution I haven't tried yet is setting a completely new array with fresh data. However, implementing this seems challenging as I want users to be able to click (and change template selection) multiple times.
I have been struggling with this problem for several hours now and would greatly appreciate any assistance. Thank you in advance :) !