修改了数组的对象属性，但在页面上没有改变

Question

我在使用vue + typescript写一个简单的demo时遇到了问题

vue代码

<template>
    <div class="hello">
        <ul>
            <li v-for="user in users" v-on:click="clickUser(user)" class="user">
                {{user}}
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue} from 'vue-property-decorator';

    type User = {
        name: string,
        clicked?: boolean
    }

    @Component
    export default class HelloWorld extends Vue {
        @Prop() private users: Array<User> = [{name: "Mike"}, {name: "Ann"}];

        clickUser(user: User) {
            user.clicked = true
            alert("clicked on " + user.name + ": " + user.clicked)
        }
    }
</script>

它们显示在页面上：

* { "name": "Mike" }
* { "name": "Ann" }

当我点击 Ann 时，它会提示：

clicked on Ann: true

但页面上没有任何变化。我希望 * { "name": "Ann" } 行是 * { "name": "Ann", "clicked": true }

如何解决？

一个完整的小演示：https://github.com/freewind-demos/vue-modify-array-object-demo

Answer 1

这里的问题是，当您将新的 key/value 对添加到响应式对象时，该对本身不是响应式的，因为 Vue 无法检测到新的属性被添加到 反应性 对象。这里需要用到Vue.set(target,key,value)方法。因此，在 clickUser() 方法中更改 user.clicked 分配，如下所示。它应该神奇地开始工作！

    clickUser(user: User) {
        Vue.set(user,'clicked',true)
        alert("clicked on " + user.name + ": " + user.clicked)
    }

这里有更多内容https://vuejs.org/v2/api/#Vue-set & here https://vuejs.org/v2/guide/reactivity.html

这有时似乎有点违反直觉，因为如果您不修改用户，而是添加一个全新的用户，this.users.push({"name":"John"}) 它就可以工作。但是对于一个，你正在创建一个新的反应对象，而对于另一个，你正在修改一个现有的对象。

修改了数组的对象属性，但在页面上没有改变

Modified the object properties of an array, but not changed on page

typescript

vuejs2

watch

vue代码