My attempt at displaying the selected checkboxes is as follows:
<pre>{{ JSON.stringify(selectedAttributes, null, 2) }}</pre>
<ul
class="list-unstyled"
v-for="category in categories"
:key="category.name"
>
<strong>{{ category.category_name }} </strong>
<li
v-for="attributes in category.attributes"
:key="attributes.attribute_id"
>
<Field
as="input"
name="attribute"
type="checkbox"
class="form-check-input"
v-model="selectedAttributes"
:id="attributes.attribute_id"
:value="attributes.attribute_id"
/>
<label class="form-check-label" for="attributes.attribute_id">
{{ attributes.attribute_name }}
</label>
</li>
</ul>
...
data() {
return {
selectedAttributes: [],
};
},
The issue I'm facing is that the attribute_id of my selected checkboxes is not being displayed. What am I doing wrong? https://i.stack.imgur.com/GLXhD.png
Update: The data received from the API appears like this: https://i.stack.imgur.com/rTjg6.png
My goal here is to allow users to select their preferences and have the chosen options' attribute_id displayed in the JSON.stringify format. Please help me achieve this.