Question

使用vue +打字稿编写简单的演示时遇到问题。

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

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

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

此处https://vuejs.org/v2/api/#Vue-set和此处https://vuejs.org/v2/guide/reactivity.html更多

这有时看起来有点反常，因为如果您不想修改用户，则添加一个全新的this.users.push({"name":"John"})即可。但是，使用一个您正在创建新的反应对象，而使用另一个您正在修改现有对象。

修改了数组的对象属性，但未在页面上进行更改

vue代码

1 个答案: