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) { ... }
}

有一些例子。请检查此fiddle

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

1 个答案: