Vue.js - Getting data from multiple keys in an object

Question

I'm trying to set something up in my app where I can select an option from a list and change the background of the app depending on what's selected.

Let's say I have a list like:

<li v-for="item in items">
 <label class="radio">
 <input type="radio" value="{{ item.name }}" v-model="itemSelection">
 {{ item.name }}
 </label>
</li>

items is an array that's 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'}
],

So when you select item1 I want to not only pull the name from the selection (which gets passed up to the parent component in itemSelection to display there) but also the img link to place that in css to change the background of the body. I'm not entirely sure how to go about this, as I'm pretty new to vue and this is basically something I'm building to help me learn!

Thanks!

Answer 1

You can do this by several ways e.g:

watch : {
 itemSelection: function(val) { ... }
}

There is some examples. Check this fiddle