alert can see this.info.status [index] changing with each click, but the view hasn"t changed. Why? I"ve been working on it all afternoon, and I don"t know what went wrong. That"s what my other project wrote, so I don"t know why this is so
. state data of vuex
all: [
{
info: {num: [555, 666], status: [false, false]}
},
{
info: {num: [555, 666], status: [false, false]}
}
] parent component
<div v-for="(item, index) in all" :key=index>
<div class="info">
<Info :info="item.info" :key="index"></Info>
</div>
</div>
computed: {
...mapState({
all: state => state.all
})
} subcomponents
<template>
<div>
<div v-for="(item, index) in tags" :key=index>
<svg class="icon" aria-hidden="true" @click=change(index)>
<use v-bind:xlink:href="info.status[index] ? item.tag2 : item.tag"></use>
</svg>
</div>
</div>
</template>
<script>
export default {
name: "Info",
props: ["info"],
data () {
return {
tags: [
{id: 1, tag: "-sharpicon-kan1", tag2: "-sharpicon-kan2"},
{id: 2, tag: "-sharpicon-xiao2", tag2: "-sharpicon-xiao2"}
]
}
},
methods: {
change (index) {
alert(this.info.status[index])
this.info.status[index] = !this.info.status[index]
}
}
}
</script>
<style scoped>
</style>