Vue遍历数组对象,添加属性,修改数据后不触发视图更新

Question

直接看代码:

<template>
    <ul>
        <li v-for="obj in objs">
            {{obj.added}} <!-- 始终显示的是默认值 -->
            <button @click="changeAddedValue(obj)">改变新增属性值</button>
        </li>
    </ul>
    
</template>

<script>
    export default {
        computed: {
            objs () {
                return this.$store.state.objs.map( val => {
                    val.added = '默认值'
                    return val
                })
            }
        },
        methods: {
            changeAddedValue (obj) {
                obj.added = '改变后的值'
            }
        }
    }
</script>

点击更改后没有,在 changeAddedValue(obj) 方法中可以执行修改,但是视图上并不更新

那么问题是:

1. 这个问题该怎么解决?
2. 这个问题是由什么原因造成的?

Answer 1

$store中的状态不能直接更改，需要提交Mutations

Answer 2

这里有说明

changeAddedValue (obj) {
                this.$set(obj,'added','改变后的值')
            }

Answer 3

因为你这个方法：

changeAddedValue (obj) {
    obj.added = '改变后的值'
}

改变的不是原始值，而是vue渲染时生成的一个临时对象里面的值；
只有改变store里面的原始值才会触发视图更新；

解决方法如楼上所示