Vue v-bind:style not updating with nested data changes - vue.js

Question

The component's style doesn't update with the itemStyleMap[index] value chage:
<view
class="item"
v-for="(item, index) in itemList"
:key="index"
:style="itemStyleMap[index]"
/>
I also tried:
<view
class="item"
v-for="(item, index) in itemList"
:key="index"
:style="{
background: itemStyleMap[index]['background'],
display: itemStyleMap[index]['display'],
zIndex: itemStyleMap[index]['zIndex'],
transform: itemStyleMap[index]['transform'],
transformOrigin: itemStyleMap[index]['transformOrigin'],
}"
/>
The itemStyleMap in data is something like this:
{
1: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
2: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
3: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
}
A more simple demo can be find here: https://jsfiddle.net/wfx6dhy5/7/
Is there any other better way to control infinate amount of style sets like this?

Answer 1

I don't know what is wrong in your project but I did something like this and it works.
check this out.
https://jsfiddle.net/softvini/c4j8ou9r/4/
<div id="app">
<div v-for="item of itemList" :key="item" :style="itemStyleMap[item]">
{{item}}
</div>
</div>
var vm = new Vue({
el: "#app",
data() {
return {
itemList: [0, 1, 2],
itemStyleMap: [{
background: "purple",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
{
background: "red",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
{
background: "brown",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
],
};
},
})
Maybe you need to read more about reactivity. So you can read it here:
https://v2.vuejs.org/v2/guide/reactivity.html

Answer 2

in your https://jsfiddle.net/wfx6dhy5/7/ data should be a function.
el: "#app",
data(){
return {
spanStyle: {
t:{
fontSize: "36px",
color: 'yellow',
border: null
}
}
}
},
methods: {
changeColors() {
this.spanStyle.color = (this.spanStyle.t.color == 'red') ? 'blue' : 'red';
this.spanStyl.border = (this.spanStyle.t.border == '3px solid blue') ? '3px solid red' : '3px solid blue';
}
}
});
Also, you missed .t in changeColors method. this.spanStyle.color should be this.spanStyle.t.color and this.spanStyl.border should be this.spanStyl.t.border