For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/
The code snippet is presented below:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="mainApp" class="container-fluid">
<p>This section contains the main list.</p>
<div class="main-list" v-for="(q, index) in questions">
<input type="checkbox"
v-bind:id="'question-' + index"
v-bind:value="{id: index, property: false}"
v-model="answers">
<label v-bind:for="q">{{q}}</label>
</div>
<p>Next, we have a list displaying the selected elements from the above list.</p>
<ul class="selected-list" v-for="(a, index) in answers" :key="a.id">
<li>{{questions[a.id]}} <input type="checkbox"
v-bind:id="'answer-' + index"
v-bind:value="true"
v-model="a.property">
</li>
</ul>
<p>Below is the array showing the answers for debugging purposes: {{answers}}</p>
</div>
<script>
var mainApp = new Vue({
el: '#mainApp',
data: {
questions: [
"Who are you ?",
"Who, who?",
"You know my name?",
"Look up my number"
],
answers: []
}
});
</script>
I aim to present an initial list of questions with individual checkboxes. The chosen questions should be saved in an array named "answers". From these selections, I wish to create another checklist where each item has its checkbox for a specific property (either true or false). It is crucial that this associated property is saved within the same "answers" array as the primary input.
In the current implementation, modifying a box in the secondary list alters the shared data array ("answers"), but also results in the corresponding answer being deselected in the first list.
Your assistance in resolving this issue would be highly appreciated.