配列のオブジェクトプロパティを変更しましたが、ページでは変更していません

debugcn 投稿 Dev

フリーウィンド

vue + typescriptを使用して簡単なデモを作成するときに問題が発生します。

コードビュー

<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" }

アンをクリックすると、次のように警告されます。

clicked on Ann: true

しかし、ページ上では何も変更されていません。行* { "name": "Ann" }は* { "name": "Ann", "clicked": true }

それを修正する方法は？

このための完全な小さなデモ：https：//github.com/freewind-demos/vue-modify-array-object-demo

書面で

ここでの問題は、新しいキーと値のペアをリアクティブオブジェクトに追加している間、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"})。ただし、一方を使用すると新しいリアクティブオブジェクトを作成し、もう一方を使用すると既存のオブジェクトを変更します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-5

コメントを追加

サインイン

分類Dev

Related 関連記事

記事