Currently, I am in the process of setting up a feature in my application where users can select an option from a list and the background of the app will change based on their selection.
Imagine having a list structured like this:
<li v-for="item in items">
<label class="radio">
<input type="radio" value="{{ item.name }}" v-model="itemSelection">
{{ item.name }}
</label>
</li>
The items array is stored in my store.js:
items: [
{name: 'item1', img: 'placehold.it/200x200-1'}
{name: 'item2', img: 'placehold.it/200x200-2'}
{name: 'item3', img: 'placehold.it/200x200-3'}
],
When a user selects item1, I not only want to retrieve the name for display in the parent component using itemSelection, but also get the image link to use it in CSS for changing the body background. Since I'm new to Vue, I am figuring out how to implement this as part of my learning process!
Appreciate any guidance and suggestions you may have!