Vue.js - 从对象中的多个键获取数据
Vue.js - Getting data from multiple keys in an object
我正在尝试在我的应用程序中进行一些设置,以便我可以 select 从列表中选择一个选项并根据 select 编辑的内容更改应用程序的背景。
假设我有一个这样的列表:
<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'}
],
所以当你 select item1
我不仅想从 selection 中提取名称(它被传递到 itemSelection
中的父组件到显示在那里)还有 img link 将其放置在 css 中以更改主体的背景。我不太确定该怎么做,因为我是 vue 的新手,这基本上是我正在构建的东西来帮助我学习!
谢谢!
您可以通过多种方式完成此操作,例如:
watch : {
itemSelection: function(val) { ... }
}
有一些例子。检查这个 fiddle
我正在尝试在我的应用程序中进行一些设置,以便我可以 select 从列表中选择一个选项并根据 select 编辑的内容更改应用程序的背景。
假设我有一个这样的列表:
<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'}
],
所以当你 select item1
我不仅想从 selection 中提取名称(它被传递到 itemSelection
中的父组件到显示在那里)还有 img link 将其放置在 css 中以更改主体的背景。我不太确定该怎么做,因为我是 vue 的新手,这基本上是我正在构建的东西来帮助我学习!
谢谢!
您可以通过多种方式完成此操作,例如:
watch : {
itemSelection: function(val) { ... }
}
有一些例子。检查这个 fiddle