Vue.js - 从对象中的多个键获取数据

Question

我正在尝试在我的应用程序中设置一些内容,我可以从列表中选择一个选项,并根据所选内容更改应用程序的背景.

假设我有一个列表:

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

items是一个存储在我的数组store.js:

items: [
   {name: 'item1', img: 'placehold.it/200x200-1'}
   {name: 'item2', img: 'placehold.it/200x200-2'}
   {name: 'item3', img: 'placehold.it/200x200-3'}
],

因此,当您选择item1我不仅要从选择中拉出名称(将其传递给父组件itemSelection以显示在那里),而且还要将img链接放在css中以更改正文的背景.我不完全确定如何去做,因为我对vue很新,这基本上是我正在建立的东西,以帮助我学习!

谢谢!

Answer 1

你可以通过几种方式做到这一点,例如:

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

有一些例子.检查这个小提琴