CODEWITHSUNDEEP
javascriptvue.jsvuex
Mr.Richway
Mr.Richway

Reputation: 151

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!

Upvotes: 0

Views: 1339

Answers (1)

Alex
Alex

Reputation: 255

You can do this by several ways e.g:

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

There is some examples. Check this fiddle

Upvotes: 5

Related Questions