代码之家 › 专栏 › 技术社区 › Freewind thk

修改了数组的对象属性,但未在页上更改

watch vuejs2 typescript

0

Freewind thk · 技术社区 · 7 年前

我在使用vue+typescript编写简单演示时遇到问题。

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

1 回复 | 直到 6 年前

1

skribe 7 年前

这里的问题是,当您将新的键/值对添加到反应对象时,该对本身不是反应的,因为Vue无法检测添加到 反应性 反对。你需要使用 Vue.set(target,key,value) 方法在这里。所以改变你的 user.clicked 你的任务 clickUser() 方法如下。它应该神奇地开始工作了!

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

有时这看起来确实有点违反直觉,因为如果不是修改用户,而是添加一个全新的用户 this.users.push({"name":"John"}) 它起作用了。但用一个,你正在创建一个新的反应对象,而另一个你正在修改一个现有的对象。