Mr.Richway Mr.Richway - 13 days ago 10
Javascript Question

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

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

You can do this by several ways e.g:

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

There is some examples. Check this fiddle